/* ============================================================
   RESPONSIVE STYLES — XoHub Solutions
   Pixel-perfect across all devices (320px → 1920px)
   ============================================================ */

/* ============================================================
   LARGE DESKTOP (1200px - 1400px)
   ============================================================ */
@media (max-width: 1400px) {
    .container {
        max-width: 1140px;
        padding: 0 32px;
    }

    .nav-link {
        font-size: 0.82rem;
        padding: 6px 12px;
    }

    .hero__title {
        font-size: 3.2rem;
    }

    .hero__inner {
        gap: 40px;
    }

    .orbit-container {
        width: 280px;
        height: 280px;
    }

    .orbit-circle--1 {
        width: 230px;
        height: 230px;
    }

    .orbit-circle--2 {
        width: 160px;
        height: 160px;
    }

    .floating-card {
        padding: 12px 16px;
        min-width: 120px;
    }

    .floating-card .card-content h4 {
        font-size: 0.75rem;
    }

    .floating-card .card-content p {
        font-size: 0.62rem;
    }

    /* Trust Section */
    .trusted-by__logos {
        gap: 28px 40px;
    }

    .partner-logo {
        width: 42px;
        height: 42px;
    }

    .stats-grid,
    .features-grid {
        gap: 20px;
    }

    .stat-card__number {
        font-size: 2.6rem;
    }

    .stat-suffix {
        font-size: 1.8rem;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
        padding: 0 28px;
    }

    .nav-link {
        font-size: 0.78rem;
        padding: 6px 10px;
    }

    .btn-primary {
        padding: 8px 18px;
        font-size: 0.78rem;
    }

    .logo__text {
        font-size: 1.2rem;
    }

    .logo__image {
        width: 34px;
        height: 34px;
    }

    .XoHubSolutions-TopBarText,
    .top-bar__text {
        font-size: 0.72rem;
    }

    .XoHubSolutions-TopBarLink,
    .top-bar__link {
        font-size: 0.68rem;
    }

    /* Hero */
    .hero__inner {
        gap: 30px;
    }

    .hero__title {
        font-size: 2.8rem;
    }

    .hero__description {
        font-size: 1rem;
        max-width: 42ch;
    }

    .btn-large {
        padding: 12px 28px;
        font-size: 0.85rem;
    }

    .btn-secondary {
        padding: 12px 26px;
        font-size: 0.85rem;
    }

    .orbit-container {
        width: 240px;
        height: 240px;
    }

    .orbit-circle--1 {
        width: 200px;
        height: 200px;
    }

    .orbit-circle--2 {
        width: 140px;
        height: 140px;
    }

    .floating-card--1 {
        top: 5%;
        right: 2%;
    }

    .floating-card--2 {
        bottom: 15%;
        left: -4%;
    }

    .floating-card--3 {
        bottom: 2%;
        right: 15%;
    }

    .floating-card--4 {
        top: 20%;
        left: 2%;
    }

    .floating-card .card-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Trust Section */
    #trust-section {
        padding: 60px 0;
    }

    .trusted-by__title,
    .stats__title,
    .features__title {
        font-size: 2rem;
    }

    .trusted-by__logos {
        gap: 24px 32px;
    }

    .partner-logo {
        width: 38px;
        height: 38px;
    }

    .stats-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* XoHubSolutions Top Stats - Tablet */
    .XoHubSolutions-TopStats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 48px;
        padding-top: 48px;
    }

    .XoHubSolutions-TopStatCard {
        padding: 20px 18px;
        min-height: 90px;
    }

    .XoHubSolutions-TopStatIcon {
        width: 48px;
        height: 48px;
    }

    .XoHubSolutions-TopStatIcon i {
        font-size: 1.25rem;
    }

    .XoHubSolutions-TopStatValue {
        font-size: 1.5rem;
    }

    .XoHubSolutions-TopStatLabel {
        font-size: 0.8rem;
    }

    /* XoHubSolutions Impact Section - Tablet */
    .XoHubSolutions-ImpactGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .XoHubSolutions-ImpactCard {
        padding: 32px 24px;
    }

    .XoHubSolutions-ImpactIcon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
    }

    .XoHubSolutions-ImpactNumber {
        font-size: 2.75rem;
    }

    .XoHubSolutions-CounterSuffix {
        font-size: 2rem;
    }

    .XoHubSolutions-ImpactLabel {
        font-size: 0.875rem;
    }

    .XoHubSolutions-ImpactDescription {
        font-size: 0.8rem;
        max-width: 26ch;
    }

    /* XoHubSolutions Services CTA - Tablet */
    .XoHubSolutions-ServicesCTA {
        flex-direction: column;
        padding: 40px 32px;
        gap: 24px;
    }

    .XoHubSolutions-CTAContent {
        text-align: center;
    }

    .XoHubSolutions-CTATitle {
        font-size: 1.875rem;
    }

    .XoHubSolutions-CTADescription {
        font-size: 1rem;
        max-width: 100%;
    }

    .XoHubSolutions-PrimaryCTA {
        width: 100%;
        max-width: 100%;
    }

    /* Services Grid - Tablet */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .service-card {
        padding: 28px 24px;
    }

    .service-card__icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .service-card__title {
        font-size: 1.125rem;
    }

    .service-card__description {
        font-size: 0.875rem;
    }

    .service-card__tech {
        gap: 6px;
    }

    .service-card__tech li {
        font-size: 0.8rem;
    }

    .services-cta {
        margin-top: 48px;
        padding: 40px 28px;
    }

    .services-cta__title {
        font-size: 1.75rem;
    }

    .services-cta__description {
        font-size: 1rem;
    }

    .stat-card {
        padding: 28px 20px;
    }

    .stat-card__number {
        font-size: 2.4rem;
    }

    .stat-suffix {
        font-size: 1.6rem;
    }

    .stat-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .stat-card__description {
        font-size: 0.8rem;
    }

    .feature-card {
        padding: 28px 20px 24px;
    }
}

/* ============================================================
   TABLET & SMALL DESKTOP (992px)
   Nav collapses → Hamburger appears
   ============================================================ */
@media (max-width: 992px) {

    /* --- Hide desktop nav links and show hamburger --- */
    .nav-links,
    .XoHubSolutions-NavLinks {
        display: none;
    }

    /* --- Show hamburger --- */
    .hamburger,
    .XoHubSolutions-Hamburger {
        display: flex;
    }

    /* --- Adjust nav actions --- */
    .nav-actions,
    .XoHubSolutions-NavActions {
        gap: 10px;
    }

    .nav-actions .btn-primary span,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary span {
        display: none;
    }

    .nav-actions .btn-primary i,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary i {
        margin: 0;
    }

    .nav-actions .btn-primary,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary {
        padding: 10px 16px;
        gap: 0;
    }

    .search-btn,
    .XoHubSolutions-SearchBtn {
        font-size: 1rem;
        padding: 8px;
    }

    /* --- Top bar: hide right nav links, keep socials --- */
    .XoHubSolutions-TopBarNav,
    .top-bar__nav {
        display: none;
    }

    .XoHubSolutions-TopBarSocials,
    .top-bar__socials {
        border-left: none;
        padding-left: 0;
        gap: 10px;
    }

    .XoHubSolutions-TopBarRight,
    .top-bar__right {
        gap: 12px;
    }

    .XoHubSolutions-TopBarText,
    .top-bar__text {
        font-size: 0.7rem;
    }

    .XoHubSolutions-SocialIcon,
    .social-icon {
        width: 22px;
        height: 22px;
        font-size: 0.68rem;
    }

    .container {
        padding: 0 20px;
    }

    .logo__text,
    .XoHubSolutions-LogoText {
        font-size: 1.2rem;
    }

    .logo__image,
    .XoHubSolutions-LogoImage {
        width: 160px;
        height: 160px;
    }

    /* --- Mobile menu adjustments for tablet --- */
    .mobile-menu {
        max-width: 420px;
        width: 90%;
    }

    /* --- Hero: stack vertically --- */
    .hero__inner {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .hero__content {
        flex: none;
        width: 100%;
        align-items: center;
        animation: none;
    }

    .hero__badge {
        align-self: center;
    }

    .hero__title {
        font-size: 2.6rem;
        max-width: 100%;
        text-align: center;
    }

    .hero__title .highlight-lime::after,
    .hero__title .XoHubSolutions-HighlightGreen::after {
        bottom: 2px;
        height: 8px;
    }

    .hero__description {
        max-width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .hero__cta-group {
        justify-content: center;
    }

    .hero__trust {
        justify-content: center;
    }

    /* --- Hero visual --- */
    .hero__visual {
        flex: none;
        width: 100%;
        min-height: 400px;
    }

    .orbit-container {
        width: 280px;
        height: 280px;
    }

    .orbit-circle--1 {
        width: 230px;
        height: 230px;
    }

    .orbit-circle--2 {
        width: 160px;
        height: 160px;
    }

    .floating-card {
        padding: 12px 16px;
        min-width: 100px;
    }

    .floating-card .card-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .floating-card .card-content h4 {
        font-size: 0.72rem;
    }

    .floating-card .card-content p {
        font-size: 0.6rem;
    }

    .floating-card--1 {
        top: 2%;
        right: 2%;
    }

    .floating-card--2 {
        bottom: 12%;
        left: 0%;
    }

    .floating-card--3 {
        bottom: 0%;
        right: 10%;
    }

    .floating-card--4 {
        top: 18%;
        left: 0%;
    }

    .visual-glow--purple {
        width: 300px;
        height: 300px;
        top: -40px;
        right: -40px;
    }

    .visual-glow--lime {
        width: 220px;
        height: 220px;
        bottom: -30px;
        left: -30px;
    }

    /* --- Trust Section --- */
    #trust-section {
        padding: 50px 0;
    }

    .trusted-by {
        padding: 30px 0 40px;
    }

    .trusted-by__header {
        margin-bottom: 32px;
    }

    /* Client Cards - Tablet */
    .client-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin: 40px 0;
    }

    .client-card {
        padding: 20px;
        gap: 16px;
    }

    .client-card__logo {
        width: 44px;
        height: 44px;
    }

    .client-card__logo i {
        font-size: 1.25rem;
    }

    .client-card__name {
        font-size: 1.0625rem;
    }

    .client-card__feedback {
        padding: 14px;
        font-size: 0.875rem;
    }

    .trusted-by__metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 40px;
        padding-top: 40px;
    }

    .trust-metric {
        padding: 16px;
        gap: 12px;
    }

    .trust-metric__icon {
        width: 44px;
        height: 44px;
    }

    .trust-metric__icon i {
        font-size: 1.125rem;
    }

    .trust-metric__value {
        font-size: 1.375rem;
    }

    .trust-metric__label {
        font-size: 0.8rem;
    }

    .trusted-by__title,
    .stats__title,
    .features__title {
        font-size: 1.8rem;
    }

    .trusted-by__subtitle,
    .stats__subtitle,
    .features__subtitle {
        font-size: 0.92rem;
    }

    .trusted-by__logos {
        gap: 20px 28px;
        max-width: 600px;
    }

    .partner-logo {
        width: 34px;
        height: 34px;
    }

    .stats-section,
    .features-section {
        padding: 40px 0;
    }

    /* XoHubSolutions Top Stats - Mobile Tablet */
    .XoHubSolutions-TopStats {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 40px;
        padding-top: 40px;
    }

    .XoHubSolutions-TopStatCard {
        padding: 18px 16px;
        min-height: 85px;
        gap: 12px;
    }

    .XoHubSolutions-TopStatIcon {
        width: 46px;
        height: 46px;
    }

    .XoHubSolutions-TopStatIcon i {
        font-size: 1.125rem;
    }

    .XoHubSolutions-TopStatValue {
        font-size: 1.375rem;
    }

    .XoHubSolutions-TopStatLabel {
        font-size: 0.75rem;
    }

    .services-section {
        padding: 60px 0;
    }

    /* XoHubSolutions Impact Section - Mobile Tablet */
    .XoHubSolutions-ImpactSection {
        padding: 48px 0;
    }

    .XoHubSolutions-ImpactTitle {
        font-size: 2.125rem;
    }

    .XoHubSolutions-ImpactSubtitle {
        font-size: 0.9375rem;
        max-width: 48ch;
    }

    .XoHubSolutions-ImpactGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 640px;
    }

    .XoHubSolutions-ImpactCard {
        padding: 28px 22px;
    }

    .XoHubSolutions-ImpactIcon {
        width: 54px;
        height: 54px;
        font-size: 1.3rem;
    }

    .XoHubSolutions-ImpactNumber {
        font-size: 2.5rem;
    }

    .XoHubSolutions-CounterSuffix {
        font-size: 1.75rem;
    }

    .XoHubSolutions-ImpactDescription {
        font-size: 0.75rem;
        max-width: 24ch;
    }

    /* XoHubSolutions Services CTA - Mobile Tablet */
    .XoHubSolutions-ServicesCTA {
        margin-top: 56px;
        padding: 36px 28px;
    }

    .XoHubSolutions-CTATitle {
        font-size: 1.75rem;
    }

    .XoHubSolutions-CTADescription {
        font-size: 0.9375rem;
    }

    .XoHubSolutions-PrimaryCTA {
        padding: 16px 36px;
        font-size: 1rem;
    }

    .services__title {
        font-size: 2rem;
    }

    .services__subtitle {
        font-size: 0.9375rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service-card {
        padding: 24px 20px;
        gap: 14px;
    }

    .service-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.375rem;
    }

    .service-card__title {
        font-size: 1.0625rem;
    }

    .service-card__description {
        font-size: 0.8125rem;
    }

    .service-card__button {
        padding: 10px 20px;
        font-size: 0.875rem;
    }

    .services-cta {
        margin-top: 40px;
        padding: 36px 24px;
    }

    .services-cta__title {
        font-size: 1.5rem;
    }

    .services-cta__description {
        font-size: 0.9375rem;
    }

    .services-cta__button {
        padding: 14px 28px;
        font-size: 0.9375rem;
    }

    .stats__subtitle,
    .features__subtitle {
        margin-bottom: 32px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 600px;
    }

    .stat-card {
        padding: 24px 16px;
    }

    .stat-card__description {
        font-size: 0.75rem;
        max-width: 24ch;
    }
        border-radius: 16px;
    }

    .stat-card__number {
        font-size: 2.2rem;
    }

    .stat-suffix {
        font-size: 1.4rem;
    }

    .stat-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .stat-card__label {
        font-size: 0.78rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 700px;
    }

    .feature-card {
        padding: 24px 18px 20px;
        text-align: center;
    }

    .feature-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .feature-card__title {
        font-size: 0.95rem;
    }

    .feature-card__description {
        font-size: 0.82rem;
    }
}

/* ============================================================
   TABLET PORTRAIT (768px)
   ============================================================ */
@media (max-width: 768px) {

    /* --- Top bar: simplify further --- */
    #top-bar {
        height: 38px;
    }

    .top-bar__inner {
        justify-content: center;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .top-bar__left {
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
    }

    .top-bar__icon {
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    /* FIXED: Allow rotator text to display fully */
    .top-bar__text {
        font-size: 0.65rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        min-width: 0;
    }

    .top-bar__socials {
        gap: 8px;
        flex-shrink: 0;
    }

    .social-icon {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    .main-nav {
        height: 68px;
    }

    .logo__image {
        width: 28px;
        height: 28px;
    }

    .mobile-menu {
        width: 88%;
        max-width: 340px;
        padding: 28px 20px;
    }

    .mobile-menu__logo {
        font-size: 1.2rem;
    }

    .mobile-menu__link {
        font-size: 0.95rem;
        padding: 10px 12px;
    }

    .mobile-sub-link {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    .mobile-cta {
        font-size: 0.8rem;
        padding: 10px 20px;
    }

    .container {
        padding: 0 16px;
    }

    .nav-actions {
        gap: 6px;
    }

    .nav-actions .btn-primary {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* --- Hero --- */
    .hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 30px) 0 50px;
        min-height: auto;
    }

    .hero__inner {
        gap: 30px;
    }

    .hero__title {
        font-size: 2.2rem;
    }

    .hero__title .highlight-lime::after {
        height: 6px;
        bottom: 0px;
    }

    .hero__description {
        font-size: 0.9rem;
    }

    .btn-large {
        padding: 10px 24px;
        font-size: 0.8rem;
    }

    .btn-secondary {
        padding: 10px 22px;
        font-size: 0.8rem;
    }

    .avatar {
        width: 34px;
        height: 34px;
        font-size: 0.6rem;
    }

    .trust-text {
        font-size: 0.75rem;
    }

    .hero__visual {
        min-height: 340px;
    }

    .orbit-container {
        width: 220px;
        height: 220px;
    }

    .orbit-circle--1 {
        width: 180px;
        height: 180px;
    }

    .orbit-circle--2 {
        width: 120px;
        height: 120px;
    }

    .orbit-node {
        width: 10px;
        height: 10px;
    }

    .orbit-center-glow {
        width: 30px;
        height: 30px;
    }

    /* FIXED: Better floating card positioning for tablet */
    .floating-card {
        padding: 10px 14px;
        min-width: 80px;
        gap: 10px;
        border-radius: 12px;
    }

    .floating-card .card-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .floating-card .card-content h4 {
        font-size: 0.68rem;
    }

    .floating-card .card-content p {
        font-size: 0.55rem;
        display: none;
    }

    .floating-card--1 {
        top: 2%;
        right: 2%;
    }

    .floating-card--2 {
        bottom: 10%;
        left: 0%;
    }

    .floating-card--3 {
        bottom: 2%;
        right: 8%;
    }

    .floating-card--4 {
        top: 16%;
        left: 0%;
    }

    .visual-glow--purple {
        width: 220px;
        height: 220px;
        top: -20px;
        right: -20px;
    }

    .visual-glow--lime {
        width: 160px;
        height: 160px;
        bottom: -20px;
        left: -20px;
    }

    /* --- Trust Section --- */
    #trust-section {
        padding: 40px 0;
    }

    .trusted-by {
        padding: 20px 0 32px;
    }

    .trusted-by__header {
        margin-bottom: 24px;
    }

    .trusted-by__title,
    .stats__title,
    .features__title {
        font-size: 1.6rem;
    }

    .trusted-by__subtitle,
    .stats__subtitle,
    .features__subtitle {
        font-size: 0.85rem;
    }

    .trusted-by__logos {
        gap: 16px 24px;
        max-width: 480px;
    }

    .partner-logo {
        width: 30px;
        height: 30px;
    }

    .stats-section,
    .features-section {
        padding: 32px 0;
    }

    .stats__subtitle,
    .features__subtitle {
        margin-bottom: 24px;
    }

    .stats-grid {
        gap: 14px;
        max-width: 480px;
    }

    .stat-card {
        padding: 20px 14px;
        border-radius: 14px;
    }

    .stat-card__number {
        font-size: 1.8rem;
    }

    .stat-suffix {
        font-size: 1.2rem;
    }

    .stat-card__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 10px;
        border-radius: 12px;
    }

    .stat-card__label {
        font-size: 0.72rem;
    }

    .features-grid {
        gap: 14px;
        max-width: 560px;
    }

    .feature-card {
        padding: 20px 16px 18px;
        border-radius: 16px;
    }

    .feature-card__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .feature-card__title {
        font-size: 0.88rem;
    }

    .feature-card__description {
        font-size: 0.78rem;
    }
}

/* ============================================================
   MOBILE LANDSCAPE (576px)
   ============================================================ */
@media (max-width: 576px) {

    /* --- Top bar: hide tagline text, show only icon + minimal socials --- */
    .XoHubSolutions-TopBarText,
    .top-bar__text {
        display: none;
    }
    
    /* Hide text rotator on mobile */
    .XoHubSolutions-TextRotator {
        display: none;
    }

    .top-bar__left,
    .XoHubSolutions-TopBarLeft {
        gap: 0;
        justify-content: center;
    }

    .top-bar__icon,
    .XoHubSolutions-TopBarIcon {
        font-size: 0.75rem;
    }

    /* Show only first 3 social icons on mobile */
    .XoHubSolutions-TopBarSocials .XoHubSolutions-SocialIcon:nth-child(n+4),
    .top-bar__socials .social-icon:nth-child(n+4) {
        display: none;
    }

    .top-bar__socials,
    .XoHubSolutions-TopBarSocials {
        gap: 8px;
    }

    .top-bar__socials .social-icon,
    .XoHubSolutions-TopBarSocials .XoHubSolutions-SocialIcon {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    #top-bar,
    #XoHubSolutions-TopBar,
    .XoHubSolutions-TopBar {
        height: 36px;
    }

    .main-nav,
    .XoHubSolutions-MainNav {
        height: 64px;
    }

    .logo__text,
    .XoHubSolutions-LogoText {
        font-size: 1rem;
    }

    .logo__image,
    .XoHubSolutions-LogoImage {
        width: 140px;
        height: 140px;
    }

    .logo__icon svg {
        width: 24px;
        height: 24px;
    }

    .search-btn,
    .XoHubSolutions-SearchBtn {
        font-size: 0.9rem;
        padding: 6px;
    }

    .nav-actions .btn-primary,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary {
        padding: 8px 14px;
        font-size: 0.75rem;
        border-radius: 50px;
    }

    .nav-actions .btn-primary i,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary i {
        font-size: 0.65rem;
    }

    .hamburger,
    .XoHubSolutions-Hamburger {
        gap: 4px;
    }

    .hamburger__line,
    .XoHubSolutions-HamburgerLine {
        width: 24px;
        height: 2.5px;
    }

    /* Mobile menu adjustments */
    .mobile-menu {
        width: 92%;
        max-width: 100%;
        padding: 28px 20px;
    }

    .mobile-menu__header {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .mobile-menu__logo {
        font-size: 1.1rem;
    }

    .mobile-menu__close {
        font-size: 1.2rem;
        width: 32px;
        height: 32px;
    }

    .mobile-menu__link {
        font-size: 0.95rem;
        padding: 12px 14px;
        min-height: 48px;
    }

    .mobile-sub-link {
        font-size: 0.85rem;
        padding: 10px 14px;
    }

    .mobile-cta {
        font-size: 0.8rem;
        padding: 12px 20px;
    }

    .mobile-socials a {
        width: 42px;
        height: 42px;
        font-size: 0.95rem;
    }

    .container {
        padding: 0 16px;
    }

    /* --- Hero --- */
    .hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 24px) 0 40px;
    }

    .hero__inner {
        gap: 24px;
    }

    .hero__badge {
        font-size: 0.7rem;
        padding: 4px 14px 4px 10px;
        gap: 6px;
    }

    .hero__title {
        font-size: 1.8rem;
    }

    .hero__title .highlight-lime::after,
    .hero__title .XoHubSolutions-HighlightGreen::after {
        height: 5px;
    }

    .hero__description {
        font-size: 0.82rem;
    }

    .hero__cta-group {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn-large {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 0.8rem;
    }

    .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 0.8rem;
    }

    .hero__trust {
        flex-wrap: wrap;
        justify-content: center;
    }

    .avatar {
        width: 30px;
        height: 30px;
        font-size: 0.55rem;
    }

    .trust-text {
        font-size: 0.7rem;
    }

    .hero__visual {
        min-height: 280px;
    }

    .orbit-container {
        width: 180px;
        height: 180px;
    }

    .orbit-circle--1 {
        width: 150px;
        height: 150px;
    }

    .orbit-circle--2 {
        width: 100px;
        height: 100px;
    }

    .orbit-node {
        width: 8px;
        height: 8px;
    }

    .orbit-center-glow {
        width: 24px;
        height: 24px;
    }

    /* FIXED: Better floating card positioning for mobile */
    .floating-card {
        padding: 8px 12px;
        min-width: 60px;
        gap: 8px;
        border-radius: 10px;
    }

    .floating-card .card-icon {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    .floating-card .card-content h4 {
        font-size: 0.6rem;
    }

    .floating-card .card-content p {
        display: none;
    }

    .floating-card--1 {
        top: 2%;
        right: 2%;
    }

    .floating-card--2 {
        bottom: 8%;
        left: 0%;
    }

    .floating-card--3 {
        bottom: 2%;
        right: 5%;
    }

    .floating-card--4 {
        top: 14%;
        left: 0%;
    }

    .visual-glow--purple {
        width: 160px;
        height: 160px;
        top: -10px;
        right: -10px;
    }

    .visual-glow--lime {
        width: 120px;
        height: 120px;
        bottom: -10px;
        left: -10px;
    }

    /* --- Trust Section --- */
    #trust-section {
        padding: 30px 0;
    }

    .trusted-by {
        padding: 16px 0 24px;
    }

    .trusted-by__header {
        margin-bottom: 20px;
    }

    .trusted-by__title,
    .stats__title,
    .features__title {
        font-size: 1.4rem;
    }

    .trusted-by__subtitle,
    .stats__subtitle,
    .features__subtitle {
        font-size: 0.8rem;
    }

    .trusted-by__logos {
        gap: 14px 20px;
        max-width: 360px;
    }

    .partner-logo {
        width: 26px;
        height: 26px;
    }

    .trusted-by__badge,
    .stats__badge,
    .features__badge {
        font-size: 0.6rem;
        padding: 3px 12px 3px 10px;
        margin-bottom: 8px;
    }

    .stats-section,
    .features-section {
        padding: 24px 0;
    }

    .stats__subtitle,
    .features__subtitle {
        margin-bottom: 20px;
        font-size: 0.8rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 400px;
    }

    .stat-card {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .stat-card__number {
        font-size: 1.6rem;
    }

    .stat-suffix {
        font-size: 1rem;
    }

    .stat-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .stat-card__label {
        font-size: 0.68rem;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 420px;
    }

    .feature-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .feature-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .feature-card__title {
        font-size: 0.82rem;
    }

    .feature-card__description {
        font-size: 0.72rem;
    }
}

/* ============================================================
   SMALL PHONES (425px, 375px, 320px)
   ============================================================ */
@media (max-width: 425px) {

    /* --- Top bar: minimal layout, center icon --- */
    .top-bar__socials,
    .XoHubSolutions-TopBarSocials {
        display: none;
    }

    .top-bar__right,
    .XoHubSolutions-TopBarRight {
        gap: 0;
    }

    .top-bar__left,
    .XoHubSolutions-TopBarLeft {
        justify-content: center;
        width: 100%;
    }

    .top-bar__icon,
    .XoHubSolutions-TopBarIcon {
        font-size: 0.7rem;
    }

    #top-bar,
    #XoHubSolutions-TopBar,
    .XoHubSolutions-TopBar {
        height: 32px;
    }

    .main-nav,
    .XoHubSolutions-MainNav {
        height: 58px;
    }

    .logo__text,
    .XoHubSolutions-LogoText {
        font-size: 0.9rem;
    }

    .logo__image,
    .XoHubSolutions-LogoImage {
        width: 120px;
        height: 120px;
    }

    .logo__icon svg {
        width: 20px;
        height: 20px;
    }

    .logo a,
    .XoHubSolutions-Logo a {
        gap: 6px;
    }

    /* Compact CTA button on mobile */
    .nav-actions .btn-primary span,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary span {
        display: none;
    }

    .nav-actions .btn-primary,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary {
        padding: 8px;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        justify-content: center;
    }

    .nav-actions .btn-primary i,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary i {
        margin: 0;
        font-size: 0.7rem;
    }

    .search-btn,
    .XoHubSolutions-SearchBtn {
        font-size: 0.8rem;
        padding: 6px;
    }

    .hamburger__line,
    .XoHubSolutions-HamburgerLine {
        width: 22px;
        height: 2px;
    }

    .hamburger,
    .XoHubSolutions-Hamburger {
        gap: 3.5px;
    }

    /* Full-width mobile menu on very small screens */
    .mobile-menu {
        width: 100%;
        max-width: 100%;
        padding: 24px 16px;
        border-radius: 0;
    }

    .mobile-menu__logo {
        font-size: 1rem;
    }

    .mobile-menu__link {
        font-size: 0.9rem;
        padding: 12px 12px;
    }

    .mobile-sub-link {
        font-size: 0.82rem;
        padding: 10px 12px;
    }

    .mobile-mega-category-title {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    .mobile-cta {
        font-size: 0.75rem;
        padding: 10px 16px;
    }

    .mobile-socials a {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    .container {
        padding: 0 12px;
    }

    /* --- Hero --- */
    .hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 20px) 0 32px;
    }

    .hero__inner {
        gap: 20px;
    }

    .hero__badge {
        font-size: 0.65rem;
        padding: 3px 12px 3px 8px;
    }

    .hero__title {
        font-size: 1.6rem;
    }

    .hero__title .highlight-lime::after,
    .hero__title .XoHubSolutions-HighlightGreen::after {
        height: 4px;
    }

    .hero__description {
        font-size: 0.78rem;
    }

    .btn-large {
        padding: 11px 18px;
        font-size: 0.75rem;
    }

    .btn-secondary {
        padding: 11px 18px;
        font-size: 0.75rem;
    }

    .hero__trust {
        gap: 10px;
    }

    .avatar {
        width: 28px;
        height: 28px;
        font-size: 0.5rem;
        border-width: 1.5px;
        margin-right: -8px;
    }

    .trust-text {
        font-size: 0.68rem;
    }

    .hero__visual {
        min-height: 220px;
    }

    .orbit-container {
        width: 150px;
        height: 150px;
    }

    .orbit-circle--1 {
        width: 125px;
        height: 125px;
    }

    .orbit-circle--2 {
        width: 85px;
        height: 85px;
    }

    .orbit-node {
        width: 6px;
        height: 6px;
    }

    .orbit-center-glow {
        width: 20px;
        height: 20px;
    }

    .floating-card {
        padding: 6px 10px;
        min-width: 50px;
        gap: 6px;
        border-radius: 8px;
        box-shadow: var(--shadow-soft);
    }

    .floating-card .card-icon {
        width: 20px;
        height: 20px;
        font-size: 0.55rem;
        border-radius: 4px;
    }

    .floating-card .card-content h4 {
        font-size: 0.5rem;
    }

    .floating-card--1 {
        top: 2%;
        right: 0%;
    }

    .floating-card--2 {
        bottom: 4%;
        left: -2%;
    }

    .floating-card--3 {
        bottom: 0%;
        right: 0%;
    }

    .floating-card--4 {
        display: none;
    }

    .visual-glow--purple {
        width: 120px;
        height: 120px;
        top: -5px;
        right: -5px;
        filter: blur(50px);
    }

    .visual-glow--lime {
        width: 80px;
        height: 80px;
        bottom: -5px;
        left: -5px;
        filter: blur(50px);
    }

    /* --- Trust Section --- */
    #trust-section {
        padding: 24px 0;
    }

    .trusted-by {
        padding: 12px 0 20px;
    }

    .trusted-by__header {
        margin-bottom: 16px;
    }

    .trusted-by__title,
    .stats__title,
    .features__title {
        font-size: 1.3rem;
    }

    .trusted-by__subtitle,
    .stats__subtitle,
    .features__subtitle {
        font-size: 0.75rem;
    }

    .trusted-by__logos {
        gap: 12px 16px;
        max-width: 300px;
    }

    .partner-logo {
        width: 24px;
        height: 24px;
    }

    .trusted-by__badge,
    .stats__badge,
    .features__badge {
        font-size: 0.55rem;
        padding: 2px 10px 2px 8px;
    }

    .stats-section,
    .features-section {
        padding: 20px 0;
    }

    .stats__subtitle,
    .features__subtitle {
        margin-bottom: 16px;
        font-size: 0.75rem;
    }

    .stats-grid {
        gap: 10px;
        max-width: 340px;
    }

    .stat-card {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .stat-card__number {
        font-size: 1.4rem;
    }

    .stat-suffix {
        font-size: 0.9rem;
    }

    .stat-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
        margin-bottom: 6px;
        border-radius: 8px;
    }

    .stat-card__label {
        font-size: 0.62rem;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 360px;
    }

    .feature-card {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .feature-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
        border-radius: 8px;
        margin-bottom: 6px;
    }

    .feature-card__title {
        font-size: 0.75rem;
    }

    .feature-card__description {
        font-size: 0.65rem;
        line-height: 1.4;
    }
}

/* ============================================================
   EXTRA SMALL (375px)
   ============================================================ */
@media (max-width: 375px) {
    .logo__text,
    .XoHubSolutions-LogoText {
        font-size: 0.85rem;
    }

    .logo__image,
    .XoHubSolutions-LogoImage {
        width: 110px;
        height: 110px;
    }

    .logo__icon svg {
        width: 18px;
        height: 18px;
    }

    .main-nav,
    .XoHubSolutions-MainNav {
        height: 54px;
    }

    .nav-actions .btn-primary,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary {
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    .nav-actions .btn-primary i,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary i {
        font-size: 0.65rem;
    }

    .search-btn,
    .XoHubSolutions-SearchBtn {
        font-size: 0.75rem;
        padding: 5px;
    }

    .mobile-menu__link {
        font-size: 0.85rem;
        padding: 11px 12px;
    }

    .mobile-sub-link {
        font-size: 0.78rem;
    }

    .mobile-mega-category-title {
        font-size: 0.8rem;
    }

    .container {
        padding: 0 10px;
    }

    .hero__title {
        font-size: 1.4rem;
    }

    .hero__description {
        font-size: 0.72rem;
    }

    .hero__badge {
        font-size: 0.6rem;
    }

    .btn-large,
    .btn-secondary {
        font-size: 0.72rem;
        padding: 10px 16px;
    }

    .hero__visual {
        min-height: 200px;
    }

    .orbit-container {
        width: 130px;
        height: 130px;
    }

    .orbit-circle--1 {
        width: 110px;
        height: 110px;
    }

    .orbit-circle--2 {
        width: 75px;
        height: 75px;
    }
}

/* ============================================================
   EXTRA EXTRA SMALL (320px)
   ============================================================ */
@media (max-width: 320px) {
    .logo__text,
    .XoHubSolutions-LogoText {
        font-size: 0.8rem;
    }

    .logo__image,
    .XoHubSolutions-LogoImage {
        width: 100px;
        height: 100px;
    }

    .main-nav,
    .XoHubSolutions-MainNav {
        height: 52px;
    }

    #top-bar,
    #XoHubSolutions-TopBar,
    .XoHubSolutions-TopBar {
        height: 30px;
    }

    .nav-actions .btn-primary,
    .XoHubSolutions-NavActions .XoHubSolutions-BtnPrimary {
        width: 30px;
        height: 30px;
    }

    .hamburger__line,
    .XoHubSolutions-HamburgerLine {
        width: 20px;
    }

    .mobile-menu__link {
        font-size: 0.82rem;
        padding: 10px;
        min-height: 44px;
    }

    .mobile-sub-link {
        font-size: 0.75rem;
        padding: 9px 10px;
    }

    .mobile-mega-category-title {
        font-size: 0.78rem;
        padding: 7px 10px;
    }

    .container {
        padding: 0 8px;
    }

    .hero__title {
        font-size: 1.3rem;
    }

    .hero__description {
        font-size: 0.7rem;
    }

    .btn-large,
    .btn-secondary {
        font-size: 0.7rem;
        padding: 9px 14px;
    }

    .hero__visual {
        min-height: 180px;
    }

    .orbit-container {
        width: 120px;
        height: 120px;
    }
}t-container {
        width: 110px;
        height: 110px;
    }

    .orbit-circle--1 {
        width: 90px;
        height: 90px;
    }

    .orbit-circle--2 {
        width: 60px;
        height: 60px;
    }

    .floating-card--2,
    .floating-card--3 {
        display: none;
    }

    .floating-card--1 {
        top: 0%;
        right: 0%;
        padding: 4px 8px;
    }

    .floating-card--1 .card-icon {
        width: 16px;
        height: 16px;
        font-size: 0.45rem;
    }

    .floating-card--1 .card-content h4 {
        font-size: 0.45rem;
    }

    .visual-glow--purple {
        width: 80px;
        height: 80px;
        filter: blur(40px);
    }

    /* Trust Section - 375px */
    .trusted-by__logos {
        gap: 10px 14px;
    }

    .partner-logo {
        width: 20px;
        height: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 300px;
    }

    .stat-card {
        padding: 12px 8px;
    }

    .stat-card__number {
        font-size: 1.1rem;
    }

    .stat-suffix {
        font-size: 0.8rem;
    }

    .stat-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .stat-card__label {
        font-size: 0.58rem;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
    }

    .feature-card {
        padding: 12px 10px 10px;
    }

    .feature-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .feature-card__title {
        font-size: 0.7rem;
    }

    .feature-card__description {
        font-size: 0.6rem;
    }

    .trusted-by__title,
    .stats__title,
    .features__title {
        font-size: 1.1rem;
    }
}

/* ============================================================
   VERY SMALL (320px)
   ============================================================ */
@media (max-width: 320px) {
    .logo__text {
        font-size: 0.7rem;
    }

    .logo__image {
        width: 18px;
        height: 18px;
    }

    .logo__icon svg {
        width: 16px;
        height: 16px;
    }

    .logo a {
        gap: 4px;
    }

    .main-nav {
        height: 46px;
    }

    .nav-actions {
        gap: 4px;
    }

    .nav-actions .btn-primary {
        width: 28px;
        height: 28px;
        padding: 0;
    }

    .nav-actions .btn-primary i {
        font-size: 0.55rem;
    }

    .search-btn {
        font-size: 0.65rem;
        padding: 2px;
    }

    .hamburger__line {
        width: 18px;
        height: 1.8px;
    }

    .hamburger {
        gap: 3px;
    }

    .mobile-menu {
        padding: 16px 12px;
    }

    .mobile-menu__logo {
        font-size: 0.85rem;
    }

    .mobile-menu__link {
        font-size: 0.72rem;
        padding: 6px 6px;
    }

    .mobile-sub-link {
        font-size: 0.68rem;
        padding: 4px 8px;
    }

    .mobile-cta {
        font-size: 0.65rem;
        padding: 6px 12px;
    }

    .mobile-socials a {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .container {
        padding: 0 6px;
    }

    #top-bar {
        height: 26px;
    }

    .top-bar__icon {
        font-size: 0.55rem;
    }

    .hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 16px) 0 24px;
    }

    .hero__title {
        font-size: 1.1rem;
    }

    .hero__title .highlight-lime::after {
        height: 3px;
    }

    .hero__description {
        font-size: 0.65rem;
    }

    .hero__badge {
        font-size: 0.55rem;
        padding: 2px 10px 2px 6px;
        gap: 4px;
    }

    .btn-large,
    .btn-secondary {
        font-size: 0.65rem;
        padding: 6px 12px;
        border-radius: 40px;
    }

    .hero__cta-group {
        gap: 8px;
    }

    .avatar {
        width: 22px;
        height: 22px;
        font-size: 0.4rem;
        margin-right: -6px;
    }

    .trust-text {
        font-size: 0.55rem;
    }

    .hero__visual {
        min-height: 140px;
    }

    .orbit-container {
        width: 80px;
        height: 80px;
    }

    .orbit-circle--1 {
        width: 65px;
        height: 65px;
        border-width: 0.5px;
    }

    .orbit-circle--2 {
        width: 45px;
        height: 45px;
        border-width: 0.5px;
    }

    .orbit-node {
        width: 4px;
        height: 4px;
    }

    .orbit-center-glow {
        width: 12px;
        height: 12px;
    }

    .floating-card--1 {
        display: none;
    }

    .visual-glow--purple {
        width: 60px;
        height: 60px;
        filter: blur(30px);
        opacity: 0.15;
    }

    .visual-glow--lime {
        width: 50px;
        height: 50px;
        filter: blur(30px);
        opacity: 0.15;
    }

    /* Trust Section - 320px */
    .trusted-by__logos {
        gap: 8px 12px;
        max-width: 240px;
    }

    .partner-logo {
        width: 18px;
        height: 18px;
    }

    .trusted-by__title,
    .stats__title,
    .features__title {
        font-size: 1rem;
    }

    .trusted-by__subtitle,
    .stats__subtitle,
    .features__subtitle {
        font-size: 0.7rem;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 260px;
    }

    .stat-card {
        padding: 10px 6px;
        border-radius: 8px;
    }

    .stat-card__number {
        font-size: 0.95rem;
    }

    .stat-suffix {
        font-size: 0.7rem;
    }

    .stat-card__icon {
        width: 24px;
        height: 24px;
        font-size: 0.55rem;
        margin-bottom: 4px;
        border-radius: 6px;
    }

    .stat-card__label {
        font-size: 0.5rem;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 280px;
    }

    .feature-card {
        padding: 10px 8px 8px;
        border-radius: 10px;
    }

    .feature-card__icon {
        width: 24px;
        height: 24px;
        font-size: 0.55rem;
        border-radius: 6px;
        margin-bottom: 4px;
    }

    .feature-card__title {
        font-size: 0.65rem;
    }

    .feature-card__description {
        font-size: 0.55rem;
        line-height: 1.3;
    }

    .trusted-by__badge,
    .stats__badge,
    .features__badge {
        font-size: 0.5rem;
        padding: 2px 8px 2px 6px;
    }
}

/* ============================================================
   UTILITY: Prevent horizontal scroll on all devices
   ============================================================ */
body {
    overflow-x: hidden;
    width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

* {
    max-width: 100%;
    box-sizing: border-box;
}

.mobile-overlay {
    width: 100vw;
    height: 100vh;
}

/* ============================================================
   SERVICES SECTION — Phase 4 (Responsive)
   ============================================================ */

/* Tablet: 2 columns */
@media (max-width: 992px) {
    #services {
        padding: 72px 0 56px;
    }

    .services__title {
        font-size: 2.2rem;
    }

    .services__subtitle {
        font-size: 0.95rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 720px;
    }

    .service-card {
        padding: 28px 22px 24px;
    }

    .service-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        border-radius: 14px;
    }

    .service-card__title {
        font-size: 1rem;
    }

    .service-card__description {
        font-size: 0.85rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    #services {
        padding: 56px 0 40px;
    }

    .services__header {
        margin-bottom: 36px;
    }

    .services__title {
        font-size: 1.8rem;
    }

    .services__subtitle {
        font-size: 0.88rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 480px;
    }

    .service-card {
        padding: 24px 20px 20px;
        border-radius: 16px;
    }

    .service-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 14px;
    }

    .service-card__title {
        font-size: 0.95rem;
    }

    .service-card__description {
        font-size: 0.82rem;
    }

    .service-card__link {
        font-size: 0.8rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #services {
        padding: 40px 0 32px;
    }

    .services__title {
        font-size: 1.5rem;
    }

    .services__subtitle {
        font-size: 0.8rem;
    }

    .service-card {
        padding: 20px 16px 18px;
    }

    .service-card__icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .service-card__title {
        font-size: 0.88rem;
    }

    .service-card__description {
        font-size: 0.78rem;
    }
}

/* Extra small (320px) */
@media (max-width: 320px) {
    #services {
        padding: 32px 0 24px;
    }

    .services__title {
        font-size: 1.3rem;
    }

    .service-card {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .service-card__icon {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .service-card__title {
        font-size: 0.82rem;
    }

    .service-card__description {
        font-size: 0.72rem;
    }

    .service-card__link {
        font-size: 0.72rem;
    }
}

/* ============================================================
   WHY CHOOSE US SECTION — Phase 5 (Responsive)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #why-choose-us {
        padding: 72px 0 56px;
    }

    .why-choose-us__inner {
        flex-direction: column;
        gap: 40px;
    }

    .why-choose-us__content {
        flex: none;
        width: 100%;
    }

    .why-choose-us__visual {
        flex: none;
        width: 100%;
        min-height: 340px;
    }

    .why-choose-us__title {
        font-size: 2.2rem;
    }

    .why-choose-us__subtitle {
        font-size: 0.95rem;
    }

    .why-choose-us__grid {
        gap: 14px 18px;
    }

    .feature-card {
        padding: 16px 18px 16px 16px;
        gap: 14px;
    }

    .feature-card__icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
    }

    .feature-card__title {
        font-size: 0.9rem;
    }

    .feature-card__description {
        font-size: 0.78rem;
    }

    /* Network illustration - scale down */
    .network-container {
        width: 300px;
        height: 300px;
    }

    .network-ring--1 {
        width: 260px;
        height: 260px;
    }

    .network-ring--2 {
        width: 200px;
        height: 200px;
    }

    .network-ring--3 {
        width: 140px;
        height: 140px;
    }

    .network-node {
        width: 38px;
        height: 38px;
        font-size: 0.8rem;
    }

    .why-choose-us__visual .floating-card {
        padding: 10px 14px;
        min-width: 100px;
    }

    .why-choose-us__visual .floating-card .card-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .floating-card--ai {
        top: 0%;
        right: 5%;
    }

    .floating-card--secure {
        bottom: 2%;
        left: 2%;
    }

    .floating-card--cloud {
        bottom: 18%;
        right: 0%;
    }
}

/* Mobile */
@media (max-width: 576px) {
    #why-choose-us {
        padding: 56px 0 40px;
    }

    .why-choose-us__inner {
        gap: 32px;
    }

    .why-choose-us__header {
        margin-bottom: 28px;
    }

    .why-choose-us__title {
        font-size: 1.8rem;
    }

    .why-choose-us__subtitle {
        font-size: 0.88rem;
    }

    .why-choose-us__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card {
        padding: 14px 16px 14px 14px;
        gap: 12px;
    }

    .feature-card::before {
        top: 12px;
        bottom: 12px;
    }

    .feature-card__icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 0.9rem;
    }

    .feature-card__title {
        font-size: 0.85rem;
    }

    .feature-card__description {
        font-size: 0.75rem;
    }

    /* Network illustration - mobile */
    .why-choose-us__visual {
        min-height: 280px;
    }

    .network-container {
        width: 240px;
        height: 240px;
    }

    .network-ring--1 {
        width: 200px;
        height: 200px;
    }

    .network-ring--2 {
        width: 160px;
        height: 160px;
    }

    .network-ring--3 {
        width: 110px;
        height: 110px;
    }

    .network-center {
        width: 56px;
        height: 56px;
    }

    .network-center__icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .network-node {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .why-choose-us__visual .floating-card {
        padding: 8px 12px;
        min-width: 80px;
        gap: 8px;
        border-radius: 10px;
    }

    .why-choose-us__visual .floating-card .card-icon {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .why-choose-us__visual .floating-card .card-content h4 {
        font-size: 0.65rem;
    }

    .why-choose-us__visual .floating-card .card-content p {
        display: none;
    }

    .floating-card--ai {
        top: 0%;
        right: 2%;
    }

    .floating-card--secure {
        bottom: 0%;
        left: 2%;
    }

    .floating-card--cloud {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #why-choose-us {
        padding: 40px 0 32px;
    }

    .why-choose-us__title {
        font-size: 1.5rem;
    }

    .why-choose-us__subtitle {
        font-size: 0.8rem;
    }

    .network-container {
        width: 200px;
        height: 200px;
    }

    .network-ring--1 {
        width: 170px;
        height: 170px;
    }

    .network-ring--2 {
        width: 130px;
        height: 130px;
    }

    .network-ring--3 {
        width: 90px;
        height: 90px;
    }

    .network-node {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .network-center {
        width: 48px;
        height: 48px;
    }

    .network-center__icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .why-choose-us__visual .floating-card {
        min-width: 60px;
        padding: 6px 10px;
    }

    .why-choose-us__visual .floating-card .card-icon {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
    }

    .why-choose-us__visual .floating-card .card-content h4 {
        font-size: 0.55rem;
    }

    .floating-card--secure {
        display: none;
    }

    .feature-card {
        padding: 12px 14px 12px 12px;
    }

    .feature-card__icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.8rem;
    }

    .feature-card__title {
        font-size: 0.8rem;
    }

    .feature-card__description {
        font-size: 0.7rem;
    }
}

/* ============================================================
   FEATURED PRODUCTS SECTION — Phase 6 (Responsive)
   ============================================================ */

/* Tablet: 2 columns */
@media (max-width: 992px) {
    #featured-products {
        padding: 72px 0 56px;
    }

    .featured-products__title {
        font-size: 2.2rem;
    }

    .featured-products__subtitle {
        font-size: 0.95rem;
    }

    .featured-products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 720px;
    }

    .product-card {
        padding: 26px 20px 22px;
    }

    .product-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        border-radius: 14px;
    }

    .product-card__title {
        font-size: 1.05rem;
    }

    .product-card__description {
        font-size: 0.85rem;
    }

    .product-card__features li {
        font-size: 0.78rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    #featured-products {
        padding: 56px 0 40px;
    }

    .featured-products__header {
        margin-bottom: 36px;
    }

    .featured-products__title {
        font-size: 1.8rem;
    }

    .featured-products__subtitle {
        font-size: 0.88rem;
    }

    .featured-products__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 480px;
    }

    .product-card {
        padding: 22px 18px 20px;
        border-radius: 16px;
    }

    .product-card--featured {
        border-width: 2px;
    }

    .product-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .product-card__category {
        font-size: 0.65rem;
    }

    .product-card__title {
        font-size: 0.98rem;
    }

    .product-card__description {
        font-size: 0.82rem;
    }

    .product-card__features {
        gap: 4px;
    }

    .product-card__features li {
        font-size: 0.75rem;
    }

    .product-card__link {
        font-size: 0.8rem;
    }

    .product-card__badge--featured {
        font-size: 0.55rem;
        padding: 2px 10px 2px 8px;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #featured-products {
        padding: 40px 0 32px;
    }

    .featured-products__title {
        font-size: 1.5rem;
    }

    .featured-products__subtitle {
        font-size: 0.8rem;
    }

    .product-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .product-card__icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .product-card__title {
        font-size: 0.9rem;
    }

    .product-card__description {
        font-size: 0.78rem;
    }

    .product-card__features li {
        font-size: 0.7rem;
    }

    .product-card__link {
        font-size: 0.75rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #featured-products {
        padding: 32px 0 24px;
    }

    .featured-products__title {
        font-size: 1.3rem;
    }

    .product-card {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .product-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .product-card__category {
        font-size: 0.6rem;
    }

    .product-card__title {
        font-size: 0.82rem;
    }

    .product-card__description {
        font-size: 0.72rem;
    }

    .product-card__features li {
        font-size: 0.65rem;
    }
}

/* ============================================================
   DEVELOPMENT PROCESS SECTION — Phase 7 (Responsive)
   ============================================================ */

/* Tablet: 2×3 grid */
@media (max-width: 992px) {
    #development-process {
        padding: 72px 0 56px;
    }

    .development-process__title {
        font-size: 2.2rem;
    }

    .development-process__subtitle {
        font-size: 0.95rem;
    }

    /* Hide the horizontal timeline line */
    .process-timeline__line {
        display: none;
    }

    /* Switch to grid layout */
    .process-timeline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding-top: 0;
        max-width: 720px;
    }

    .process-step {
        flex: none;
        width: 100%;
    }

    .process-step__connector {
        display: none;
    }

    .process-step__card {
        min-height: 180px;
        padding: 22px 18px 20px;
    }

    .process-step__icon {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .process-step__title {
        font-size: 0.9rem;
    }

    .process-step__description {
        font-size: 0.78rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    #development-process {
        padding: 56px 0 40px;
    }

    .development-process__header {
        margin-bottom: 36px;
    }

    .development-process__title {
        font-size: 1.8rem;
    }

    .development-process__subtitle {
        font-size: 0.88rem;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 480px;
    }

    .process-step__card {
        min-height: 160px;
        padding: 20px 16px 18px;
        border-radius: 16px;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        align-items: center;
    }

    /* Adjust card layout for mobile */
    .process-step__card::before {
        left: 10%;
        right: 10%;
        height: 2px;
    }

    .process-step__number {
        font-size: 0.65rem;
        margin-bottom: 4px;
        width: 100%;
        text-align: left;
    }

    .process-step__icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        margin-bottom: 0;
        margin-right: 14px;
        flex-shrink: 0;
    }

    .process-step__title {
        font-size: 0.88rem;
        margin-bottom: 2px;
        flex: 1;
    }

    .process-step__description {
        font-size: 0.75rem;
        width: 100%;
        padding-left: 58px;
        margin-top: 2px;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #development-process {
        padding: 40px 0 32px;
    }

    .development-process__title {
        font-size: 1.5rem;
    }

    .development-process__subtitle {
        font-size: 0.8rem;
    }

    .process-timeline {
        gap: 12px;
    }

    .process-step__card {
        padding: 16px 14px 14px;
        border-radius: 14px;
        min-height: 140px;
    }

    .process-step__icon {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
        border-radius: 10px;
        margin-right: 12px;
    }

    .process-step__title {
        font-size: 0.82rem;
    }

    .process-step__description {
        font-size: 0.7rem;
        padding-left: 50px;
    }

    .process-step__number {
        font-size: 0.6rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #development-process {
        padding: 32px 0 24px;
    }

    .development-process__title {
        font-size: 1.3rem;
    }

    .process-step__card {
        padding: 14px 12px 12px;
        border-radius: 12px;
        min-height: 120px;
    }

    .process-step__icon {
        width: 34px;
        height: 34px;
        font-size: 0.75rem;
        border-radius: 8px;
        margin-right: 10px;
    }

    .process-step__title {
        font-size: 0.78rem;
    }

    .process-step__description {
        font-size: 0.65rem;
        padding-left: 44px;
    }
}

/* ============================================================
   TECHNOLOGIES SECTION — Phase 8 (Responsive)
   ============================================================ */

/* Tablet: 2 columns */
@media (max-width: 992px) {
    #technologies {
        padding: 72px 0 56px;
    }

    .technologies-section__title {
        font-size: 2.2rem;
    }

    .technologies-section__subtitle {
        font-size: 0.95rem;
    }

    .tech-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
    }

    .tech-category {
        padding: 20px 18px 24px;
    }

    .tech-category__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .tech-category__title {
        font-size: 0.92rem;
    }

    .tech-category__description {
        font-size: 0.72rem;
    }

    .tech-badge {
        font-size: 0.68rem;
        padding: 4px 12px 4px 8px;
    }

    .tech-badge svg {
        width: 16px;
        height: 16px;
    }

    .tech-stats {
        padding-top: 32px;
    }

    .tech-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin: 0 auto;
    }

    .tech-stat__number {
        font-size: 2.4rem;
    }

    .tech-stat__suffix {
        font-size: 1.6rem;
    }

    .tech-stat__label {
        font-size: 0.78rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    #technologies {
        padding: 56px 0 40px;
    }

    .technologies-section__header {
        margin-bottom: 36px;
    }

    .technologies-section__title {
        font-size: 1.8rem;
    }

    .technologies-section__subtitle {
        font-size: 0.88rem;
    }

    .tech-categories {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 480px;
    }

    .tech-category {
        padding: 18px 16px 20px;
        border-radius: 16px;
    }

    .tech-category__header {
        gap: 12px;
        margin-bottom: 12px;
    }

    .tech-category__icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .tech-category__title {
        font-size: 0.88rem;
    }

    .tech-category__description {
        font-size: 0.7rem;
    }

    .tech-category__badges {
        gap: 6px;
    }

    .tech-badge {
        font-size: 0.65rem;
        padding: 4px 10px 4px 8px;
        gap: 4px;
    }

    .tech-badge svg {
        width: 14px;
        height: 14px;
    }

    .tech-stats {
        padding-top: 28px;
    }

    .tech-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 380px;
    }

    .tech-stat {
        padding: 12px 8px;
    }

    .tech-stat__number {
        font-size: 2rem;
    }

    .tech-stat__suffix {
        font-size: 1.4rem;
    }

    .tech-stat__label {
        font-size: 0.72rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #technologies {
        padding: 40px 0 32px;
    }

    .technologies-section__title {
        font-size: 1.5rem;
    }

    .technologies-section__subtitle {
        font-size: 0.8rem;
    }

    .tech-category {
        padding: 16px 14px 18px;
        border-radius: 14px;
    }

    .tech-category__icon {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }

    .tech-category__title {
        font-size: 0.82rem;
    }

    .tech-category__description {
        font-size: 0.65rem;
    }

    .tech-badge {
        font-size: 0.6rem;
        padding: 3px 8px 3px 6px;
    }

    .tech-badge svg {
        width: 12px;
        height: 12px;
    }

    .tech-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
    }

    .tech-stat {
        padding: 10px 6px;
    }

    .tech-stat__number {
        font-size: 1.6rem;
    }

    .tech-stat__suffix {
        font-size: 1.1rem;
    }

    .tech-stat__label {
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #technologies {
        padding: 32px 0 24px;
    }

    .technologies-section__title {
        font-size: 1.3rem;
    }

    .tech-category {
        padding: 14px 12px 16px;
        border-radius: 12px;
    }

    .tech-category__header {
        gap: 10px;
    }

    .tech-category__icon {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .tech-category__title {
        font-size: 0.78rem;
    }

    .tech-category__description {
        font-size: 0.6rem;
    }

    .tech-badge {
        font-size: 0.55rem;
        padding: 2px 6px 2px 4px;
    }

    .tech-badge svg {
        width: 10px;
        height: 10px;
    }

    .tech-stats__grid {
        gap: 6px;
        max-width: 280px;
    }

    .tech-stat__number {
        font-size: 1.3rem;
    }

    .tech-stat__suffix {
        font-size: 0.9rem;
    }

    .tech-stat__label {
        font-size: 0.6rem;
    }
}

/* ============================================================
   INDUSTRIES SECTION — Phase 9 (Responsive)
   ============================================================ */

/* Tablet: 2 columns */
@media (max-width: 992px) {
    #industries {
        padding: 72px 0 56px;
    }

    .industries-section__title {
        font-size: 2.2rem;
    }

    .industries-section__subtitle {
        font-size: 0.95rem;
    }

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
    }

    .industry-card {
        padding: 26px 20px 24px;
        min-height: 220px;
    }

    .industry-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        border-radius: 14px;
    }

    .industry-card__title {
        font-size: 0.98rem;
    }

    .industry-card__description {
        font-size: 0.82rem;
    }

    .industry-card__link {
        font-size: 0.78rem;
    }

    .industry-card:hover .industry-card__footer {
        max-height: 50px;
        padding-top: 12px;
        margin-top: 10px;
    }

    .industry-card__footer span {
        font-size: 0.55rem;
        padding: 2px 10px;
    }

    .industry-card--featured::after {
        top: 12px;
        right: 16px;
        font-size: 0.6rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    #industries {
        padding: 56px 0 40px;
    }

    .industries-section__header {
        margin-bottom: 36px;
    }

    .industries-section__title {
        font-size: 1.8rem;
    }

    .industries-section__subtitle {
        font-size: 0.88rem;
    }

    .industries-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 480px;
    }

    .industry-card {
        padding: 22px 18px 20px;
        border-radius: 16px;
        min-height: 180px;
    }

    .industry-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .industry-card__title {
        font-size: 0.92rem;
    }

    .industry-card__description {
        font-size: 0.8rem;
    }

    .industry-card__link {
        font-size: 0.75rem;
    }

    .industry-card:hover .industry-card__footer {
        max-height: 44px;
        padding-top: 10px;
        margin-top: 8px;
    }

    .industry-card__footer span {
        font-size: 0.5rem;
        padding: 2px 8px;
    }

    .industry-card--featured::after {
        top: 10px;
        right: 14px;
        font-size: 0.55rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #industries {
        padding: 40px 0 32px;
    }

    .industries-section__title {
        font-size: 1.5rem;
    }

    .industries-section__subtitle {
        font-size: 0.8rem;
    }

    .industries-grid {
        gap: 12px;
    }

    .industry-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
        min-height: 160px;
    }

    .industry-card__icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .industry-card__title {
        font-size: 0.85rem;
    }

    .industry-card__description {
        font-size: 0.75rem;
    }

    .industry-card__link {
        font-size: 0.7rem;
    }

    .industry-card__footer span {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .industry-card--featured::after {
        top: 8px;
        right: 12px;
        font-size: 0.5rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #industries {
        padding: 32px 0 24px;
    }

    .industries-section__title {
        font-size: 1.3rem;
    }

    .industry-card {
        padding: 14px 12px 14px;
        border-radius: 12px;
        min-height: 140px;
    }

    .industry-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .industry-card__title {
        font-size: 0.8rem;
    }

    .industry-card__description {
        font-size: 0.7rem;
    }

    .industry-card__link {
        font-size: 0.65rem;
    }

    .industry-card:hover .industry-card__footer {
        max-height: 36px;
        padding-top: 8px;
        margin-top: 6px;
    }

    .industry-card__footer span {
        font-size: 0.4rem;
        padding: 1px 4px;
    }
}

/* ============================================================
   PORTFOLIO SECTION — Phase 10 (Responsive)
   ============================================================ */

/* Tablet: 2 columns */
@media (max-width: 992px) {
    #portfolio {
        padding: 72px 0 56px;
    }

    .portfolio-section__header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 36px;
    }

    .portfolio-section__header-left {
        max-width: 100%;
    }

    .portfolio-section__header-right {
        padding-top: 0;
        width: 100%;
    }

    .btn-portfolio-header {
        width: 100%;
        justify-content: center;
    }

    .portfolio-section__title {
        font-size: 2.2rem;
    }

    .portfolio-section__subtitle {
        font-size: 0.95rem;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 720px;
        margin-bottom: 40px;
    }

    .portfolio-card__content {
        padding: 18px 18px 20px;
    }

    .portfolio-card__title {
        font-size: 0.98rem;
    }

    .portfolio-card__description {
        font-size: 0.82rem;
    }

    .portfolio-cta__title {
        font-size: 1.4rem;
    }

    .portfolio-cta__description {
        font-size: 0.88rem;
    }

    .btn-portfolio-cta,
    .btn-portfolio-cta-secondary {
        padding: 12px 28px;
        font-size: 0.88rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    #portfolio {
        padding: 56px 0 40px;
    }

    .portfolio-section__header {
        margin-bottom: 28px;
    }

    .portfolio-section__title {
        font-size: 1.8rem;
    }

    .portfolio-section__subtitle {
        font-size: 0.88rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 480px;
        margin-bottom: 32px;
    }

    .portfolio-card__image {
        aspect-ratio: 16/9;
    }

    .portfolio-card__content {
        padding: 16px 16px 18px;
    }

    .portfolio-card__title {
        font-size: 0.92rem;
    }

    .portfolio-card__description {
        font-size: 0.8rem;
    }

    .portfolio-card__tech span {
        font-size: 0.55rem;
        padding: 2px 10px;
    }

    .portfolio-card__link {
        font-size: 0.78rem;
    }

    .placeholder-content i {
        font-size: 2.2rem;
    }

    .placeholder-content span {
        font-size: 0.85rem;
    }

    .featured-badge {
        font-size: 0.5rem;
        padding: 3px 10px;
        top: 10px;
        right: 10px;
    }

    .overlay-icon {
        font-size: 1.6rem;
    }

    .overlay-text {
        font-size: 0.85rem;
    }

    .overlay-tech {
        font-size: 0.6rem;
    }

    .portfolio-cta {
        padding-top: 28px;
    }

    .portfolio-cta__title {
        font-size: 1.2rem;
    }

    .portfolio-cta__description {
        font-size: 0.82rem;
    }

    .portfolio-cta__buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-portfolio-cta,
    .btn-portfolio-cta-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #portfolio {
        padding: 40px 0 32px;
    }

    .portfolio-section__title {
        font-size: 1.5rem;
    }

    .portfolio-section__subtitle {
        font-size: 0.8rem;
    }

    .portfolio-card__content {
        padding: 14px 14px 16px;
    }

    .portfolio-card__title {
        font-size: 0.85rem;
    }

    .portfolio-card__description {
        font-size: 0.75rem;
    }

    .portfolio-card__tech span {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .portfolio-card__link {
        font-size: 0.72rem;
    }

    .portfolio-cta__title {
        font-size: 1.05rem;
    }

    .btn-portfolio-cta,
    .btn-portfolio-cta-secondary {
        font-size: 0.8rem;
        padding: 10px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #portfolio {
        padding: 32px 0 24px;
    }

    .portfolio-section__title {
        font-size: 1.3rem;
    }

    .portfolio-card__content {
        padding: 12px 12px 14px;
    }

    .portfolio-card__title {
        font-size: 0.8rem;
    }

    .portfolio-card__description {
        font-size: 0.7rem;
    }

    .portfolio-card__tech span {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .portfolio-card__link {
        font-size: 0.68rem;
    }

    .placeholder-content i {
        font-size: 1.8rem;
    }

    .placeholder-content span {
        font-size: 0.7rem;
    }

    .portfolio-cta__title {
        font-size: 0.95rem;
    }

    .portfolio-cta__description {
        font-size: 0.72rem;
    }

    .btn-portfolio-cta,
    .btn-portfolio-cta-secondary {
        font-size: 0.72rem;
        padding: 8px 16px;
    }
}

/* ============================================================
   TESTIMONIALS SECTION — Phase 11 (Responsive)
   ============================================================ */

/* Tablet: 2 columns */
@media (max-width: 992px) {
    #testimonials {
        padding: 72px 0 56px;
    }

    .testimonials-section__header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 36px;
    }

    .testimonials-section__header-left {
        max-width: 100%;
    }

    .testimonials-section__header-right {
        padding-top: 0;
        width: 100%;
    }

    .btn-testimonials-header {
        width: 100%;
        justify-content: center;
    }

    .testimonials-section__title {
        font-size: 2.2rem;
    }

    .testimonials-section__subtitle {
        font-size: 0.95rem;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 720px;
        margin-bottom: 36px;
    }

    .testimonial-card {
        padding: 26px 22px 24px;
    }

    .testimonial-card__avatar {
        width: 48px;
        height: 48px;
        font-size: 0.9rem;
    }

    .testimonial-card__name {
        font-size: 0.92rem;
    }

    .testimonial-card__review {
        font-size: 0.85rem;
    }

    .trust-indicators {
        padding: 24px 0 20px;
        margin-bottom: 36px;
    }

    .trust-indicators__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin: 0 auto;
    }

    .trust-indicator__number {
        font-size: 1.4rem;
    }

    .testimonials-cta__title {
        font-size: 1.4rem;
    }

    .testimonials-cta__description {
        font-size: 0.88rem;
    }

    .btn-testimonials-cta,
    .btn-testimonials-cta-secondary {
        padding: 12px 28px;
        font-size: 0.88rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    #testimonials {
        padding: 56px 0 40px;
    }

    .testimonials-section__header {
        margin-bottom: 28px;
    }

    .testimonials-section__title {
        font-size: 1.8rem;
    }

    .testimonials-section__subtitle {
        font-size: 0.88rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 480px;
        margin-bottom: 28px;
    }

    .testimonial-card {
        padding: 22px 18px 20px;
        border-radius: 16px;
    }

    .testimonial-card__header {
        gap: 12px;
        margin-bottom: 12px;
    }

    .testimonial-card__avatar {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }

    .testimonial-card__name {
        font-size: 0.88rem;
    }

    .testimonial-card__position {
        font-size: 0.72rem;
    }

    .testimonial-card__rating {
        margin-bottom: 10px;
    }

    .testimonial-card__rating i {
        font-size: 0.75rem;
    }

    .testimonial-card__quote i {
        font-size: 1.2rem;
    }

    .testimonial-card__review {
        font-size: 0.82rem;
    }

    .trust-indicators {
        padding: 20px 0 16px;
        margin-bottom: 28px;
    }

    .trust-indicators__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 380px;
    }

    .trust-indicator {
        padding: 6px 8px;
    }

    .trust-indicator__icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .trust-indicator__number {
        font-size: 1.2rem;
    }

    .trust-indicator__label {
        font-size: 0.7rem;
    }

    .testimonials-cta {
        padding-top: 4px;
    }

    .testimonials-cta__title {
        font-size: 1.2rem;
    }

    .testimonials-cta__description {
        font-size: 0.82rem;
    }

    .testimonials-cta__buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-testimonials-cta,
    .btn-testimonials-cta-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #testimonials {
        padding: 40px 0 32px;
    }

    .testimonials-section__title {
        font-size: 1.5rem;
    }

    .testimonials-section__subtitle {
        font-size: 0.8rem;
    }

    .testimonial-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .testimonial-card__header {
        gap: 10px;
    }

    .testimonial-card__avatar {
        width: 38px;
        height: 38px;
        font-size: 0.75rem;
    }

    .testimonial-card__name {
        font-size: 0.82rem;
    }

    .testimonial-card__position {
        font-size: 0.68rem;
    }

    .testimonial-card__review {
        font-size: 0.78rem;
    }

    .trust-indicators__grid {
        gap: 8px;
        max-width: 320px;
    }

    .trust-indicator__number {
        font-size: 1rem;
    }

    .trust-indicator__label {
        font-size: 0.65rem;
    }

    .testimonials-cta__title {
        font-size: 1.05rem;
    }

    .btn-testimonials-cta,
    .btn-testimonials-cta-secondary {
        font-size: 0.8rem;
        padding: 10px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #testimonials {
        padding: 32px 0 24px;
    }

    .testimonials-section__title {
        font-size: 1.3rem;
    }

    .testimonial-card {
        padding: 16px 12px 14px;
        border-radius: 12px;
    }

    .testimonial-card__avatar {
        width: 34px;
        height: 34px;
        font-size: 0.7rem;
    }

    .testimonial-card__name {
        font-size: 0.78rem;
    }

    .testimonial-card__position {
        font-size: 0.62rem;
    }

    .testimonial-card__review {
        font-size: 0.72rem;
    }

    .trust-indicators__grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 280px;
    }

    .trust-indicator__icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .trust-indicator__number {
        font-size: 0.9rem;
    }

    .trust-indicator__label {
        font-size: 0.58rem;
    }

    .testimonials-cta__title {
        font-size: 0.95rem;
    }

    .testimonials-cta__description {
        font-size: 0.72rem;
    }

    .btn-testimonials-cta,
    .btn-testimonials-cta-secondary {
        font-size: 0.72rem;
        padding: 8px 16px;
    }
}

/* ============================================================
   CTA SECTION — Phase 12 (Responsive)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #cta {
        padding: 72px 0 56px;
    }

    .cta-section__inner {
        flex-direction: column;
        gap: 40px;
    }

    .cta-section__content {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .cta-section__badge {
        align-self: center;
    }

    .cta-section__title {
        font-size: 2.4rem;
    }

    .cta-section__description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-section__benefits {
        align-items: center;
    }

    .cta-section__buttons {
        justify-content: center;
    }

    .cta-section__card-wrapper {
        flex: none;
        width: 100%;
        justify-content: center;
    }

    .cta-card {
        max-width: 480px;
        padding: 32px 28px 28px;
    }

    .cta-card__features {
        gap: 12px;
        padding: 16px 0;
    }

    .cta-card__feature {
        gap: 10px;
    }

    /* Hide some background decorations on tablet */
    .cta-bg__orb--3,
    .cta-bg__shape--3,
    .cta-bg__glow--3 {
        display: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    #cta {
        padding: 56px 0 40px;
    }

    .cta-section__inner {
        gap: 32px;
    }

    .cta-section__title {
        font-size: 1.8rem;
    }

    .cta-section__description {
        font-size: 0.92rem;
    }

    .cta-section__benefits {
        gap: 10px;
    }

    .cta-section__benefits li {
        font-size: 0.85rem;
        gap: 10px;
    }

    .benefit-icon {
        font-size: 0.95rem;
    }

    .cta-section__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.88rem;
    }

    .cta-card {
        max-width: 100%;
        padding: 28px 20px 24px;
        border-radius: 20px;
    }

    .cta-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .cta-card__title {
        font-size: 1.1rem;
    }

    .cta-card__description {
        font-size: 0.82rem;
    }

    .cta-card__features {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    .cta-card__feature {
        gap: 8px;
    }

    .feature-icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .feature-label {
        font-size: 0.55rem;
    }

    .feature-value {
        font-size: 0.72rem;
    }

    .cta-card__button {
        padding: 12px 24px;
        font-size: 0.82rem;
    }

    /* Hide decorative elements on mobile */
    .cta-bg__grid,
    .cta-bg__orb,
    .cta-bg__shape,
    .cta-bg__glow--3,
    .cta-bg__glow--4 {
        display: none;
    }

    .cta-bg__glow--1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -80px;
        filter: blur(80px);
        opacity: 0.08;
    }

    .cta-bg__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        left: -60px;
        filter: blur(80px);
        opacity: 0.06;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #cta {
        padding: 40px 0 32px;
    }

    .cta-section__title {
        font-size: 1.5rem;
    }

    .cta-section__description {
        font-size: 0.85rem;
    }

    .cta-section__benefits li {
        font-size: 0.8rem;
    }

    .cta-card {
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .cta-card__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .cta-card__title {
        font-size: 0.98rem;
    }

    .cta-card__description {
        font-size: 0.78rem;
    }

    .cta-card__features {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px 0;
    }

    .cta-card__feature {
        gap: 6px;
    }

    .feature-icon {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .feature-label {
        font-size: 0.5rem;
    }

    .feature-value {
        font-size: 0.65rem;
    }

    .cta-card__button {
        padding: 10px 20px;
        font-size: 0.78rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #cta {
        padding: 32px 0 24px;
    }

    .cta-section__title {
        font-size: 1.3rem;
    }

    .cta-section__description {
        font-size: 0.78rem;
    }

    .cta-section__benefits li {
        font-size: 0.72rem;
        gap: 8px;
    }

    .benefit-icon {
        font-size: 0.8rem;
    }

    .cta-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .cta-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .cta-card__title {
        font-size: 0.88rem;
    }

    .cta-card__description {
        font-size: 0.72rem;
    }

    .cta-card__features {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px 0;
    }

    .feature-icon {
        width: 24px;
        height: 24px;
        font-size: 0.55rem;
    }

    .feature-label {
        font-size: 0.45rem;
    }

    .feature-value {
        font-size: 0.58rem;
    }

    .cta-card__button {
        padding: 8px 16px;
        font-size: 0.72rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 8px 16px;
        font-size: 0.72rem;
    }
}

/* ============================================================
   FOOTER — Phase 13 (Responsive)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    .footer__top {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px 20px;
        padding-bottom: 32px;
    }

    .footer__column--brand {
        grid-column: span 3;
    }

    .footer__description {
        max-width: 100%;
    }

    .newsletter__content {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .newsletter__header {
        min-width: auto;
    }

    .newsletter__form {
        min-width: auto;
        max-width: 100%;
    }

    .footer__trust-badges {
        justify-content: center;
    }

    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer__bottom-links {
        justify-content: center;
    }

    .back-to-top {
        bottom: 24px;
        right: 24px;
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    /* Hide some background decorations */
    .footer-bg__orb--2,
    .footer-bg__shape--2,
    .footer-bg__shape--3 {
        display: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .main-footer {
        padding: 40px 0 0;
    }

    .footer__top {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 24px;
    }

    .footer__column--brand {
        grid-column: span 1;
    }

    .footer__logo-text {
        font-size: 1.2rem;
    }

    .footer__logo-image {
        width: 50%;
        height: 50%;
    }

    .footer__description {
        font-size: 0.8rem;
    }

    .footer__column-title {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }

    .footer__links li a {
        font-size: 0.78rem;
    }

    .footer__contact-list li {
        font-size: 0.78rem;
    }

    .footer__social {
        gap: 6px;
    }

    .social-link {
        width: 34px;
        height: 34px;
        font-size: 0.75rem;
    }

    .footer__newsletter {
        padding: 24px 0 20px;
    }

    .newsletter__header {
        gap: 12px;
    }

    .newsletter__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .newsletter__title {
        font-size: 0.95rem;
    }

    .newsletter__description {
        font-size: 0.75rem;
    }

    .newsletter__input-group {
        padding: 2px 2px 2px 14px;
        flex-wrap: wrap;
        border-radius: 40px;
    }

    .newsletter__input {
        font-size: 0.78rem;
        padding: 8px 0;
        width: 100%;
        min-width: 100%;
    }

    .newsletter__button {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.78rem;
        border-radius: 40px;
    }

    .footer__trust-badges {
        gap: 12px 20px;
        padding-top: 16px;
        margin-top: 16px;
        justify-content: flex-start;
    }

    .trust-badge {
        font-size: 0.7rem;
    }

    .footer__bottom {
        padding: 12px 0;
    }

    .footer__copyright p,
    .footer__credit p {
        font-size: 0.65rem;
    }

    .footer__bottom-links a {
        font-size: 0.62rem;
    }

    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    /* Hide background decorations on mobile */
    .footer-bg__grid,
    .footer-bg__orb,
    .footer-bg__shape,
    .footer-bg__glow--3 {
        display: none;
    }

    .footer-bg__glow--1 {
        width: 300px;
        height: 300px;
        top: -100px;
        left: -80px;
        filter: blur(80px);
        opacity: 0.06;
    }

    .footer-bg__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        right: -60px;
        filter: blur(80px);
        opacity: 0.05;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .footer__top {
        gap: 16px;
        padding-bottom: 20px;
    }

    .footer__logo-text {
        font-size: 1.05rem;
    }

    .footer__logo-image {
        width: 36px;
        height: 36px;
    }

    .footer__tagline {
        font-size: 0.75rem;
    }

    .footer__description {
        font-size: 0.72rem;
    }

    .footer__column-title {
        font-size: 0.75rem;
    }

    .footer__links li a {
        font-size: 0.72rem;
    }

    .footer__contact-list li {
        font-size: 0.72rem;
    }

    .social-link {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .newsletter__title {
        font-size: 0.85rem;
    }

    .newsletter__description {
        font-size: 0.68rem;
    }

    .newsletter__input {
        font-size: 0.72rem;
    }

    .newsletter__button {
        font-size: 0.72rem;
        padding: 8px 16px;
    }

    .trust-badge {
        font-size: 0.62rem;
    }

    .back-to-top {
        bottom: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .footer__logo-text {
        font-size: 0.95rem;
    }

    .footer__logo-image {
        width: 32px;
        height: 32px;
    }

    .footer__column-title {
        font-size: 0.7rem;
    }

    .footer__links li a {
        font-size: 0.68rem;
    }

    .footer__contact-list li {
        font-size: 0.68rem;
    }

    .social-link {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .trust-badge {
        font-size: 0.55rem;
        gap: 4px;
    }

    .trust-badge__icon {
        font-size: 0.7rem;
    }

    .back-to-top {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
        bottom: 12px;
        right: 12px;
    }
}

/* ============================================================
   ABOUT HERO — Responsive (Phase 1)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #about-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 30px) 0 50px;
        min-height: auto;
    }

    .about-hero__inner {
        flex-direction: column;
        gap: 40px;
    }

    .about-hero__content {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .about-hero__badge {
        align-self: center;
    }

    .about-hero__title {
        font-size: 2.6rem;
        text-align: center;
    }

    .about-hero__title .highlight-lime::after {
        bottom: 0;
        height: 8px;
    }

    .about-hero__description {
        max-width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .about-hero__buttons {
        justify-content: center;
    }

    .about-hero__breadcrumb {
        align-self: center;
    }

    .about-hero__visual {
        flex: none;
        width: 100%;
        min-height: 400px;
    }

    .about-visual__card--main {
        max-width: 360px;
    }

    .about-visual__card--chart {
        top: 2%;
        right: 0%;
    }

    .about-visual__card--ai {
        bottom: 15%;
        left: -2%;
    }

    .about-visual__card--code {
        bottom: 2%;
        right: 5%;
    }

    .about-visual__card--cloud {
        top: 20%;
        left: -2%;
    }

    .about-hero__orb--1,
    .about-hero__orb--3 {
        display: none;
    }

    .about-hero__shape--4 {
        display: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    #about-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 24px) 0 40px;
    }

    .about-hero__inner {
        gap: 32px;
    }

    .about-hero__title {
        font-size: 2rem;
    }

    .about-hero__title .highlight-lime::after {
        height: 6px;
    }

    .about-hero__description {
        font-size: 0.88rem;
    }

    .btn-about-primary,
    .btn-about-secondary {
        padding: 12px 24px;
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
    }

    .about-hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .about-hero__breadcrumb li {
        font-size: 0.7rem;
    }

    .about-hero__visual {
        min-height: 340px;
    }

    .about-visual__card--main {
        max-width: 300px;
        padding: 18px 20px 16px;
        border-radius: 18px;
    }

    .visual-card__body {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .visual-card__value {
        font-size: 0.82rem;
    }

    .visual-card__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 10px;
    }

    /* Hide most floating cards on mobile, keep 1-2 */
    .about-visual__card--ai,
    .about-visual__card--cloud {
        display: none;
    }

    .about-visual__card--chart {
        top: 0%;
        right: 0%;
        min-width: 100px;
        padding: 10px 14px;
    }

    .about-visual__card--code {
        bottom: 0%;
        right: 2%;
        padding: 8px 12px;
    }

    .float-card__code {
        font-size: 0.55rem;
    }

    .float-card__label {
        font-size: 0.5rem;
    }

    .float-card__value {
        font-size: 0.72rem;
    }

    .float-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .float-card__chart {
        height: 24px;
        gap: 3px;
    }

    .chart-bar {
        min-width: 8px;
    }

    .about-visual__orb {
        width: 80px;
        height: 80px;
    }

    .about-hero__bg .about-hero__shape {
        display: none;
    }

    .about-hero__circuit,
    .about-hero__hexagons {
        opacity: 0.25;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #about-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 20px) 0 32px;
    }

    .about-hero__title {
        font-size: 1.6rem;
    }

    .about-hero__title .highlight-lime::after {
        height: 5px;
    }

    .about-hero__description {
        font-size: 0.8rem;
    }

    .btn-about-primary,
    .btn-about-secondary {
        font-size: 0.78rem;
        padding: 10px 20px;
    }

    .about-hero__visual {
        min-height: 280px;
    }

    .about-visual__card--main {
        max-width: 260px;
        padding: 14px 16px 12px;
        border-radius: 14px;
    }

    .visual-card__body {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .visual-card__value {
        font-size: 0.72rem;
    }

    .visual-card__label {
        font-size: 0.5rem;
    }

    .about-visual__card--chart,
    .about-visual__card--code {
        display: none;
    }

    .about-visual__orb {
        width: 60px;
        height: 60px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #about-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 16px) 0 24px;
    }

    .about-hero__title {
        font-size: 1.3rem;
    }

    .about-hero__title .highlight-lime::after {
        height: 4px;
    }

    .about-hero__description {
        font-size: 0.72rem;
    }

    .about-visual__card--main {
        max-width: 220px;
        padding: 12px 12px 10px;
        border-radius: 12px;
    }

    .visual-card__body {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .visual-card__value {
        font-size: 0.65rem;
    }

    .visual-card__label {
        font-size: 0.45rem;
    }

    .visual-card__header {
        margin-bottom: 12px;
    }

    .visual-card__dot {
        width: 8px;
        height: 8px;
    }

    .visual-card__footer {
        padding-top: 8px;
    }

    .visual-card__status {
        font-size: 0.55rem;
    }

    .visual-card__growth {
        font-size: 0.55rem;
    }
}

/* ============================================================
   WHO WE ARE — Responsive (Phase 2)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #who-we-are {
        padding: 60px 0 40px;
    }

    .who-we-are__inner {
        flex-direction: column;
        gap: 40px;
    }

    .who-we-are__content {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .who-we-are__badge {
        align-self: center;
    }

    .who-we-are__title {
        font-size: 2rem;
        text-align: center;
    }

    .who-we-are__description {
        max-width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .who-we-are__expertise {
        grid-template-columns: 1fr 1fr;
        gap: 6px 16px;
        text-align: left;
        width: 100%;
    }

    .who-we-are__vision-mission {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .who-we-are__visual {
        flex: none;
        width: 100%;
        min-height: 380px;
    }

    .who-visual__card--main {
        max-width: 340px;
    }

    .who-visual__card--innovation {
        top: 2%;
        right: 0%;
    }

    .who-visual__card--secure {
        bottom: 15%;
        left: -2%;
    }

    .who-visual__card--ai {
        bottom: 2%;
        right: 5%;
    }

    .who-visual__card--cloud {
        top: 18%;
        left: -2%;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .who-we-are__features {
        margin-top: 40px;
        padding-top: 32px;
    }

    .who-we-are__orb--1,
    .who-we-are__orb--2 {
        display: none;
    }

    .who-we-are__shape--3 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #who-we-are {
        padding: 40px 0 32px;
    }

    .who-we-are__inner {
        gap: 32px;
    }

    .who-we-are__title {
        font-size: 1.6rem;
    }

    .who-we-are__description {
        font-size: 0.88rem;
    }

    .who-we-are__expertise {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        width: 100%;
    }

    .expertise-item {
        font-size: 0.75rem;
        gap: 8px;
    }

    .expertise-item__icon {
        font-size: 0.7rem;
    }

    .who-we-are__vision-mission {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
    }

    .vision-mission__item {
        padding: 14px 16px;
        border-radius: 14px;
    }

    .vision-mission__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .vision-mission__title {
        font-size: 0.8rem;
    }

    .vision-mission__text {
        font-size: 0.72rem;
    }

    .who-we-are__visual {
        min-height: 320px;
    }

    .who-visual__card--main {
        max-width: 280px;
        padding: 18px 16px 16px;
        border-radius: 18px;
    }

    .who-visual__stats {
        gap: 4px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .stat-value {
        font-size: 1rem;
    }

    .stat-label {
        font-size: 0.5rem;
    }

    .who-visual__chart {
        height: 40px;
        gap: 3px;
    }

    .who-visual__chart .chart-bar {
        min-width: 6px;
    }

    .who-visual__card-footer {
        padding-top: 10px;
    }

    .growth-indicator {
        font-size: 0.65rem;
    }

    .active-status {
        font-size: 0.55rem;
    }

    .who-visual__card--secure,
    .who-visual__card--cloud {
        display: none;
    }

    .who-visual__card--innovation {
        top: 0%;
        right: 0%;
        padding: 8px 12px;
        border-radius: 12px;
    }

    .who-visual__card--ai {
        bottom: 0%;
        right: 2%;
        padding: 8px 12px;
        border-radius: 12px;
    }

    .float-card__icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }

    .float-card__label {
        font-size: 0.45rem;
    }

    .float-card__value {
        font-size: 0.62rem;
    }

    .who-visual__orb {
        width: 70px;
        height: 70px;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .feature-card {
        padding: 20px 16px 18px;
        border-radius: 14px;
    }

    .feature-card__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .feature-card__title {
        font-size: 0.85rem;
    }

    .feature-card__description {
        font-size: 0.72rem;
    }

    .who-we-are__features {
        margin-top: 32px;
        padding-top: 24px;
    }

    .who-we-are__bg .who-we-are__shape {
        display: none;
    }

    .who-we-are__grid {
        opacity: 0.15;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #who-we-are {
        padding: 32px 0 24px;
    }

    .who-we-are__title {
        font-size: 1.3rem;
    }

    .who-we-are__description {
        font-size: 0.8rem;
    }

    .who-we-are__expertise {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .expertise-item {
        font-size: 0.7rem;
    }

    .who-we-are__visual {
        min-height: 260px;
    }

    .who-visual__card--main {
        max-width: 240px;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .who-visual__stats {
        gap: 2px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .stat-value {
        font-size: 0.85rem;
    }

    .stat-label {
        font-size: 0.45rem;
    }

    .who-visual__chart {
        height: 32px;
        gap: 2px;
    }

    .who-visual__chart .chart-bar {
        min-width: 4px;
        border-radius: 2px 2px 0 0;
    }

    .who-visual__card-footer {
        padding-top: 8px;
    }

    .growth-indicator {
        font-size: 0.55rem;
    }

    .who-visual__card--innovation,
    .who-visual__card--ai {
        display: none;
    }

    .who-visual__orb {
        width: 50px;
        height: 50px;
    }

    /* FIX: Single column on very small screens */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .feature-card {
        padding: 16px 14px 14px;
        border-radius: 12px;
    }

    .feature-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        margin-bottom: 8px;
    }

    .feature-card__title {
        font-size: 0.78rem;
    }

    .feature-card__description {
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #who-we-are {
        padding: 24px 0 16px;
    }

    .who-we-are__title {
        font-size: 1.1rem;
    }

    .who-we-are__description {
        font-size: 0.72rem;
    }

    .expertise-item {
        font-size: 0.62rem;
    }

    .who-visual__card--main {
        max-width: 200px;
        padding: 10px 10px 10px;
        border-radius: 12px;
    }

    .stat-value {
        font-size: 0.7rem;
    }

    .stat-label {
        font-size: 0.4rem;
    }

    .who-visual__chart {
        height: 24px;
    }

    .who-visual__chart .chart-bar {
        min-width: 3px;
    }

    .growth-indicator {
        font-size: 0.45rem;
    }

    .active-status {
        font-size: 0.45rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .feature-card {
        padding: 12px 10px 10px;
        border-radius: 10px;
    }

    .feature-card__icon {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .feature-card__title {
        font-size: 0.68rem;
    }

    .feature-card__description {
        font-size: 0.58rem;
    }
}

/* ============================================================
   OUR STORY — Responsive (Phase 3)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #our-story {
        padding: 60px 0 60px;
    }

    .our-story__header {
        margin-bottom: 40px;
    }

    .our-story__title {
        font-size: 2.2rem;
    }

    .our-story__subtitle {
        font-size: 0.95rem;
    }

    .our-story__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .our-story__chapters {
        gap: 20px;
    }

    .story-chapter {
        padding: 20px 22px 20px 20px;
    }

    .story-chapter__number {
        font-size: 1.4rem;
        min-width: 36px;
    }

    .story-chapter__title {
        font-size: 0.98rem;
    }

    .story-chapter__description {
        font-size: 0.85rem;
    }

    .our-story__timeline {
        padding: 8px 0 8px 32px;
        gap: 20px;
    }

    .timeline__line {
        left: 12px;
    }

    .timeline__card {
        padding: 14px 16px 14px 14px;
    }

    .our-story__orb--1,
    .our-story__orb--3 {
        display: none;
    }

    .our-story__shape--3 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #our-story {
        padding: 40px 0 40px;
    }

    .our-story__header {
        margin-bottom: 32px;
    }

    .our-story__title {
        font-size: 1.8rem;
    }

    .our-story__subtitle {
        font-size: 0.88rem;
    }

    .our-story__grid {
        gap: 32px;
    }

    .our-story__chapters {
        gap: 16px;
    }

    .story-chapter {
        padding: 16px 16px 16px 14px;
        border-radius: 14px;
        flex-direction: column;
        gap: 6px;
    }

    .story-chapter__number {
        font-size: 1.2rem;
        min-width: auto;
    }

    .story-chapter__title {
        font-size: 0.92rem;
    }

    .story-chapter__description {
        font-size: 0.8rem;
    }

    .our-story__timeline {
        padding: 4px 0 4px 28px;
        gap: 16px;
    }

    .timeline__line {
        left: 10px;
        top: 20px;
        bottom: 20px;
    }

    .timeline__milestone {
        gap: 14px;
    }

    .timeline__node {
        width: 22px;
        height: 22px;
    }

    .timeline__node-dot {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

    .timeline__card {
        padding: 12px 14px 12px 12px;
        border-radius: 12px;
        gap: 10px;
    }

    .timeline__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .timeline__title {
        font-size: 0.82rem;
    }

    .timeline__description {
        font-size: 0.72rem;
    }

    .our-story__bg .our-story__shape {
        display: none;
    }

    .our-story__network,
    .our-story__hexagons {
        opacity: 0.15;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #our-story {
        padding: 32px 0 32px;
    }

    .our-story__title {
        font-size: 1.5rem;
    }

    .our-story__subtitle {
        font-size: 0.8rem;
    }

    .story-chapter {
        padding: 14px 12px 14px 12px;
        border-radius: 12px;
    }

    .story-chapter__number {
        font-size: 1rem;
    }

    .story-chapter__title {
        font-size: 0.85rem;
    }

    .story-chapter__description {
        font-size: 0.75rem;
    }

    .our-story__timeline {
        padding: 2px 0 2px 22px;
        gap: 14px;
    }

    .timeline__line {
        left: 8px;
    }

    .timeline__node {
        width: 18px;
        height: 18px;
    }

    .timeline__node-dot {
        width: 8px;
        height: 8px;
    }

    .timeline__card {
        padding: 10px 12px 10px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .timeline__icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    .timeline__title {
        font-size: 0.75rem;
    }

    .timeline__description {
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #our-story {
        padding: 24px 0 24px;
    }

    .our-story__title {
        font-size: 1.3rem;
    }

    .our-story__subtitle {
        font-size: 0.72rem;
    }

    .story-chapter {
        padding: 12px 10px 12px 10px;
        border-radius: 10px;
    }

    .story-chapter__number {
        font-size: 0.9rem;
    }

    .story-chapter__title {
        font-size: 0.78rem;
    }

    .story-chapter__description {
        font-size: 0.68rem;
    }

    .timeline__card {
        padding: 8px 10px 8px 8px;
        border-radius: 8px;
    }

    .timeline__icon {
        width: 22px;
        height: 22px;
        font-size: 0.55rem;
    }

    .timeline__title {
        font-size: 0.68rem;
    }

    .timeline__description {
        font-size: 0.58rem;
    }
}

/* ============================================================
   MISSION & VISION — Responsive (Phase 4)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #mission-vision {
        padding: 60px 0 60px;
    }

    .mission-vision__header {
        margin-bottom: 36px;
    }

    .mission-vision__title {
        font-size: 2.2rem;
    }

    .mission-vision__subtitle {
        font-size: 0.95rem;
    }

    .mission-vision__grid {
        gap: 24px;
        max-width: 720px;
    }

    .mv-card {
        padding: 32px 28px 28px;
        border-radius: 20px;
    }

    .mv-card__icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
        border-radius: 18px;
    }

    .mv-card__title {
        font-size: 1.4rem;
    }

    .mv-card__description {
        font-size: 0.88rem;
    }

    .mv-card__highlights {
        gap: 6px 12px;
    }

    .mv-card__highlights li {
        font-size: 0.8rem;
    }

    .mission-vision__orb--1,
    .mission-vision__orb--2 {
        display: none;
    }

    .mission-vision__shape--2 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #mission-vision {
        padding: 40px 0 40px;
    }

    .mission-vision__header {
        margin-bottom: 28px;
    }

    .mission-vision__title {
        font-size: 1.8rem;
    }

    .mission-vision__subtitle {
        font-size: 0.88rem;
    }

    .mission-vision__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 480px;
    }

    .mv-card {
        padding: 28px 22px 24px;
        border-radius: 18px;
    }

    .mv-card__icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
        border-radius: 16px;
        margin-bottom: 16px;
    }

    .mv-card__title {
        font-size: 1.2rem;
    }

    .mv-card__description {
        font-size: 0.85rem;
    }

    .mv-card__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
    }

    .mv-card__highlights li {
        font-size: 0.78rem;
        padding: 4px 0;
    }

    .highlight-icon {
        font-size: 0.7rem;
    }

    .mission-vision__bg .mission-vision__shape {
        display: none;
    }

    .mission-vision__grid {
        opacity: 0.15;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #mission-vision {
        padding: 32px 0 32px;
    }

    .mission-vision__title {
        font-size: 1.5rem;
    }

    .mission-vision__subtitle {
        font-size: 0.8rem;
    }

    .mission-vision__grid {
        gap: 16px;
    }

    .mv-card {
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .mv-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .mv-card__title {
        font-size: 1.05rem;
    }

    .mv-card__description {
        font-size: 0.8rem;
    }

    .mv-card__highlights {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mv-card__highlights li {
        font-size: 0.72rem;
        padding: 3px 0;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #mission-vision {
        padding: 24px 0 24px;
    }

    .mission-vision__title {
        font-size: 1.3rem;
    }

    .mission-vision__subtitle {
        font-size: 0.72rem;
    }

    .mv-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .mv-card__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .mv-card__title {
        font-size: 0.95rem;
    }

    .mv-card__description {
        font-size: 0.72rem;
    }

    .mv-card__highlights li {
        font-size: 0.65rem;
    }
}

/* ============================================================
   CORE VALUES — Responsive (Phase 5)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #core-values {
        padding: 60px 0 60px;
    }

    .core-values__header {
        margin-bottom: 40px;
    }

    .core-values__title {
        font-size: 2.2rem;
    }

    .core-values__subtitle {
        font-size: 0.95rem;
    }

    .core-values__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 720px;
    }

    .value-card {
        padding: 28px 22px 24px;
        border-radius: 18px;
    }

    .value-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .value-card__title {
        font-size: 1rem;
    }

    .value-card__description {
        font-size: 0.82rem;
    }

    .core-values__orb--1,
    .core-values__orb--3 {
        display: none;
    }

    .core-values__shape--3 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #core-values {
        padding: 40px 0 40px;
    }

    .core-values__header {
        margin-bottom: 32px;
    }

    .core-values__title {
        font-size: 1.8rem;
    }

    .core-values__subtitle {
        font-size: 0.88rem;
    }

    .core-values__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        max-width: 480px;
    }

    .value-card {
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .value-card__icon {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .value-card__title {
        font-size: 0.92rem;
    }

    .value-card__description {
        font-size: 0.78rem;
    }

    .core-values__bg .core-values__shape {
        display: none;
    }

    .core-values__grid {
        opacity: 0.15;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #core-values {
        padding: 32px 0 32px;
    }

    .core-values__title {
        font-size: 1.5rem;
    }

    .core-values__subtitle {
        font-size: 0.8rem;
    }

    .core-values__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 340px;
    }

    .value-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .value-card__icon {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .value-card__title {
        font-size: 0.85rem;
    }

    .value-card__description {
        font-size: 0.72rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #core-values {
        padding: 24px 0 24px;
    }

    .core-values__title {
        font-size: 1.3rem;
    }

    .core-values__subtitle {
        font-size: 0.72rem;
    }

    .value-card {
        padding: 14px 12px 14px;
        border-radius: 12px;
    }

    .value-card__icon {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .value-card__title {
        font-size: 0.78rem;
    }

    .value-card__description {
        font-size: 0.65rem;
    }
}

/* ============================================================
   WHY CHOOSE — Responsive (Phase 6)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #why-choose {
        padding: 60px 0 40px;
    }

    .why-choose__header {
        margin-bottom: 40px;
    }

    .why-choose__title {
        font-size: 2.2rem;
    }

    .why-choose__subtitle {
        font-size: 0.95rem;
    }

    .why-choose__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-choose__visual {
        min-height: 380px;
        order: -1;
    }

    .why-visual__dashboard {
        max-width: 340px;
    }

    .why-choose__cards {
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
    }

    .why-card {
        padding: 16px 16px 16px 14px;
    }

    .why-card__icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 0.85rem;
    }

    .why-card__title {
        font-size: 0.82rem;
    }

    .why-card__description {
        font-size: 0.74rem;
    }

    .why-card__badge {
        font-size: 0.45rem;
        top: 8px;
        right: 10px;
        padding: 1px 8px;
    }

    .why-choose__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin-top: 40px;
        padding-top: 32px;
    }

    .mini-stat__number {
        font-size: 1.8rem;
    }

    .mini-stat__suffix {
        font-size: 1.3rem;
    }

    .why-choose__orb--1,
    .why-choose__orb--2 {
        display: none;
    }

    .why-choose__shape--3 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #why-choose {
        padding: 40px 0 32px;
    }

    .why-choose__header {
        margin-bottom: 32px;
    }

    .why-choose__title {
        font-size: 1.8rem;
    }

    .why-choose__subtitle {
        font-size: 0.88rem;
    }

    .why-choose__grid {
        gap: 32px;
    }

    .why-choose__visual {
        min-height: 320px;
    }

    .why-visual__dashboard {
        max-width: 280px;
        padding: 18px 16px 16px;
        border-radius: 18px;
    }

    .dashboard__stats {
        gap: 4px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .dash-stat__value {
        font-size: 0.95rem;
    }

    .dash-stat__label {
        font-size: 0.45rem;
    }

    .dashboard__chart {
        height: 38px;
        gap: 3px;
    }

    .dashboard__chart .chart-bar {
        min-width: 5px;
    }

    .dash-growth {
        font-size: 0.6rem;
    }

    .dash-status {
        font-size: 0.5rem;
    }

    /* Hide some floating cards on mobile */
    .why-visual__float--2,
    .why-visual__float--4 {
        display: none;
    }

    .why-visual__float--1 {
        top: 0%;
        right: 0%;
        padding: 6px 10px;
        border-radius: 10px;
    }

    .why-visual__float--3 {
        bottom: 0%;
        right: 2%;
        padding: 6px 10px;
        border-radius: 10px;
    }

    .float-icon {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .float-label {
        font-size: 0.4rem;
    }

    .float-value {
        font-size: 0.6rem;
    }

    .why-visual__orb {
        width: 60px;
        height: 60px;
    }

    .why-choose__cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .why-card {
        padding: 14px 14px 14px 12px;
        border-radius: 14px;
    }

    .why-card__icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .why-card__title {
        font-size: 0.78rem;
    }

    .why-card__description {
        font-size: 0.7rem;
    }

    .why-card__badge {
        font-size: 0.4rem;
        top: 6px;
        right: 8px;
        padding: 1px 6px;
    }

    .why-choose__stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 380px;
        margin-top: 32px;
        padding-top: 24px;
    }

    .mini-stat {
        padding: 4px 8px;
    }

    .mini-stat__number {
        font-size: 1.5rem;
    }

    .mini-stat__suffix {
        font-size: 1.1rem;
    }

    .mini-stat__label {
        font-size: 0.7rem;
    }

    .why-choose__bg .why-choose__shape {
        display: none;
    }

    .why-choose__network,
    .why-choose__hexagons {
        opacity: 0.15;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #why-choose {
        padding: 32px 0 24px;
    }

    .why-choose__title {
        font-size: 1.5rem;
    }

    .why-choose__subtitle {
        font-size: 0.8rem;
    }

    .why-choose__visual {
        min-height: 280px;
    }

    .why-visual__dashboard {
        max-width: 240px;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .dashboard__stats {
        gap: 2px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .dash-stat__value {
        font-size: 0.8rem;
    }

    .dashboard__chart {
        height: 30px;
        gap: 2px;
    }

    .dashboard__chart .chart-bar {
        min-width: 3px;
        border-radius: 2px 2px 0 0;
    }

    .dashboard__footer {
        padding-top: 8px;
    }

    .dash-growth {
        font-size: 0.5rem;
    }

    .why-visual__float--1,
    .why-visual__float--3 {
        display: none;
    }

    .why-visual__orb {
        width: 50px;
        height: 50px;
    }

    .why-card {
        padding: 12px 12px 12px 10px;
        border-radius: 12px;
        gap: 10px;
    }

    .why-card__icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    .why-card__title {
        font-size: 0.72rem;
    }

    .why-card__description {
        font-size: 0.65rem;
    }

    .why-choose__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
        margin-top: 24px;
        padding-top: 16px;
    }

    .mini-stat__number {
        font-size: 1.2rem;
    }

    .mini-stat__suffix {
        font-size: 0.9rem;
    }

    .mini-stat__label {
        font-size: 0.62rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #why-choose {
        padding: 24px 0 16px;
    }

    .why-choose__title {
        font-size: 1.3rem;
    }

    .why-choose__subtitle {
        font-size: 0.72rem;
    }

    .why-visual__dashboard {
        max-width: 200px;
        padding: 10px 10px 10px;
        border-radius: 12px;
    }

    .dash-stat__value {
        font-size: 0.7rem;
    }

    .dashboard__chart {
        height: 24px;
    }

    .dashboard__chart .chart-bar {
        min-width: 2px;
    }

    .why-card {
        padding: 10px 10px 10px 8px;
        border-radius: 10px;
        gap: 8px;
    }

    .why-card__icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 0.55rem;
    }

    .why-card__title {
        font-size: 0.65rem;
    }

    .why-card__description {
        font-size: 0.58rem;
    }

    .why-choose__stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 280px;
    }

    .mini-stat__number {
        font-size: 1rem;
    }

    .mini-stat__suffix {
        font-size: 0.75rem;
    }

    .mini-stat__label {
        font-size: 0.55rem;
    }
}

/* ============================================================
   MEET OUR TEAM — Responsive (Phase 7)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #meet-team {
        padding: 60px 0 60px;
    }

    .meet-team__header {
        margin-bottom: 40px;
    }

    .meet-team__title {
        font-size: 2.2rem;
    }

    .meet-team__subtitle {
        font-size: 0.95rem;
    }

    /* Founder Card */
    .founder-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 32px;
        padding: 32px 28px 28px;
        margin-bottom: 40px;
    }

    .founder-card__image-wrapper {
        width: 140px;
        height: 140px;
    }

    .founder-card__initial {
        font-size: 3rem;
    }

    .founder-card__bio {
        max-width: 100%;
        text-align: center;
    }

    .founder-card__tags {
        justify-content: center;
    }

    .founder-card__actions {
        justify-content: center;
    }

    .founder-card__social {
        justify-content: center;
    }

    .founder-card__deco {
        display: none;
    }

    .leadership-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 40px;
    }

    .leader-card {
        padding: 24px 18px 20px;
        border-radius: 18px;
    }

    .leader-card__image {
        width: 70px;
        height: 70px;
    }

    .leader-card__initial {
        font-size: 1.2rem;
    }

    .team-highlights {
        padding: 24px 0 20px;
        margin-bottom: 40px;
    }

    .team-highlights__grid {
        gap: 8px 14px;
    }

    .highlight-badge {
        font-size: 0.72rem;
        padding: 4px 14px;
    }

    .culture-quote__card {
        padding: 28px 24px 24px;
    }

    .culture-quote__text {
        font-size: 1.1rem;
    }

    .meet-team__orb--1,
    .meet-team__orb--3 {
        display: none;
    }

    .meet-team__shape--2 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #meet-team {
        padding: 40px 0 40px;
    }

    .meet-team__header {
        margin-bottom: 32px;
    }

    .meet-team__title {
        font-size: 1.8rem;
    }

    .meet-team__subtitle {
        font-size: 0.88rem;
    }

    .founder-card {
        padding: 24px 18px 22px;
        border-radius: 18px;
        gap: 24px;
        margin-bottom: 32px;
    }

    .founder-card__image-wrapper {
        width: 120px;
        height: 120px;
    }

    .founder-card__initial {
        font-size: 2.5rem;
    }

    .founder-card__name {
        font-size: 1.5rem;
    }

    .founder-card__position {
        font-size: 0.75rem;
    }

    .founder-card__bio {
        font-size: 0.85rem;
    }

    .founder-tag {
        font-size: 0.6rem;
        padding: 3px 10px;
    }

    .btn-founder,
    .btn-founder-secondary {
        padding: 8px 20px;
        font-size: 0.78rem;
    }

    .founder-card__social .social-link {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .leadership-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 32px;
    }

    .leader-card {
        padding: 20px 14px 18px;
        border-radius: 16px;
    }

    .leader-card__image {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    .leader-card__initial {
        font-size: 1rem;
    }

    .leader-card__name {
        font-size: 0.88rem;
    }

    .leader-card__position {
        font-size: 0.62rem;
    }

    .leader-card__bio {
        font-size: 0.72rem;
        margin-bottom: 10px;
    }

    .leader-card__social .social-link {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .team-highlights {
        padding: 20px 0 16px;
        margin-bottom: 32px;
    }

    .team-highlights__grid {
        gap: 6px 10px;
    }

    .highlight-badge {
        font-size: 0.65rem;
        padding: 3px 12px;
    }

    .culture-quote__card {
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .culture-quote__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .culture-quote__text {
        font-size: 0.95rem;
    }

    .culture-quote__author {
        font-size: 0.75rem;
    }

    .meet-team__bg .meet-team__shape {
        display: none;
    }

    .meet-team__network {
        opacity: 0.12;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #meet-team {
        padding: 32px 0 32px;
    }

    .meet-team__title {
        font-size: 1.5rem;
    }

    .meet-team__subtitle {
        font-size: 0.8rem;
    }

    .founder-card {
        padding: 20px 14px 18px;
        border-radius: 16px;
        gap: 18px;
    }

    .founder-card__image-wrapper {
        width: 100px;
        height: 100px;
    }

    .founder-card__initial {
        font-size: 2rem;
    }

    .founder-card__name {
        font-size: 1.2rem;
    }

    .founder-card__position {
        font-size: 0.65rem;
    }

    .founder-card__bio {
        font-size: 0.78rem;
    }

    .founder-card__tags {
        gap: 4px 8px;
    }

    .founder-tag {
        font-size: 0.55rem;
        padding: 2px 8px;
    }

    .btn-founder,
    .btn-founder-secondary {
        padding: 6px 16px;
        font-size: 0.7rem;
    }

    .founder-card__social .social-link {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .leader-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .leader-card__image {
        width: 56px;
        height: 56px;
    }

    .leader-card__initial {
        font-size: 0.9rem;
    }

    .team-highlights__grid {
        gap: 4px 8px;
    }

    .highlight-badge {
        font-size: 0.6rem;
        padding: 2px 10px;
    }

    .culture-quote__text {
        font-size: 0.85rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #meet-team {
        padding: 24px 0 24px;
    }

    .meet-team__title {
        font-size: 1.3rem;
    }

    .founder-card__image-wrapper {
        width: 80px;
        height: 80px;
    }

    .founder-card__initial {
        font-size: 1.6rem;
    }

    .founder-card__name {
        font-size: 1rem;
    }

    .founder-card__bio {
        font-size: 0.7rem;
    }

    .leader-card__image {
        width: 48px;
        height: 48px;
    }

    .leader-card__initial {
        font-size: 0.75rem;
    }

    .culture-quote__text {
        font-size: 0.78rem;
    }
}

/* ============================================================
   COMPANY TIMELINE — Responsive (Phase 8)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #company-timeline {
        padding: 60px 0 60px;
    }

    .company-timeline__header {
        margin-bottom: 40px;
    }

    .company-timeline__title {
        font-size: 2.2rem;
    }

    .company-timeline__subtitle {
        font-size: 0.95rem;
    }

    .timeline__line {
        left: 20px;
    }

    .timeline__item {
        padding-left: 50px !important;
        padding-right: 0 !important;
        flex-direction: row !important;
        text-align: left !important;
        margin-bottom: 36px;
    }

    .timeline__item--left,
    .timeline__item--right {
        padding-left: 50px !important;
        padding-right: 0 !important;
        flex-direction: row !important;
        text-align: left !important;
    }

    .timeline__item--left .timeline__card,
    .timeline__item--right .timeline__card {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .timeline__node {
        left: 20px;
        transform: translateX(-50%);
        width: 40px;
    }

    .timeline__node-dot {
        width: 16px;
        height: 16px;
    }

    .timeline__year {
        font-size: 0.55rem;
        margin-top: 4px;
        padding: 1px 8px;
    }

    .timeline__card {
        padding: 16px 18px 16px 16px;
        border-radius: 16px;
        gap: 12px;
    }

    .timeline__card-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    .timeline__card-title {
        font-size: 0.9rem;
    }

    .timeline__card-description {
        font-size: 0.78rem;
    }

    .timeline__progress {
        padding: 18px 20px 16px;
        margin-top: 32px;
    }

    .progress-steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .progress-step {
        font-size: 0.6rem;
        padding: 2px 10px;
    }

    .company-timeline__orb--1,
    .company-timeline__orb--3 {
        display: none;
    }

    .company-timeline__shape--2 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #company-timeline {
        padding: 40px 0 40px;
    }

    .company-timeline__header {
        margin-bottom: 32px;
    }

    .company-timeline__title {
        font-size: 1.8rem;
    }

    .company-timeline__subtitle {
        font-size: 0.88rem;
    }

    .timeline {
        padding: 10px 0 20px;
    }

    .timeline__line {
        left: 16px;
    }

    .timeline__item {
        padding-left: 40px !important;
        margin-bottom: 28px;
    }

    .timeline__item--left,
    .timeline__item--right {
        padding-left: 40px !important;
    }

    .timeline__node {
        left: 16px;
        width: 32px;
    }

    .timeline__node-dot {
        width: 14px;
        height: 14px;
        border-width: 2.5px;
    }

    .timeline__year {
        font-size: 0.5rem;
        margin-top: 3px;
        padding: 1px 6px;
    }

    .timeline__card {
        padding: 14px 14px 14px 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .timeline__card-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 0.85rem;
        border-radius: 8px;
    }

    .timeline__card-title {
        font-size: 0.82rem;
    }

    .timeline__card-description {
        font-size: 0.72rem;
    }

    .timeline__progress {
        padding: 14px 14px 12px;
        margin-top: 24px;
        border-radius: 14px;
    }

    .progress-label {
        font-size: 0.6rem;
        margin-bottom: 8px;
    }

    .progress-bar {
        height: 3px;
        margin-bottom: 10px;
    }

    .progress-step {
        font-size: 0.55rem;
        padding: 2px 8px;
    }

    .company-timeline__bg .company-timeline__shape {
        display: none;
    }

    .company-timeline__grid {
        opacity: 0.12;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #company-timeline {
        padding: 32px 0 32px;
    }

    .company-timeline__title {
        font-size: 1.5rem;
    }

    .company-timeline__subtitle {
        font-size: 0.8rem;
    }

    .timeline__item {
        padding-left: 34px !important;
        margin-bottom: 22px;
    }

    .timeline__item--left,
    .timeline__item--right {
        padding-left: 34px !important;
    }

    .timeline__line {
        left: 13px;
    }

    .timeline__node {
        left: 13px;
        width: 28px;
    }

    .timeline__node-dot {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .timeline__year {
        font-size: 0.45rem;
        margin-top: 2px;
        padding: 1px 4px;
    }

    .timeline__card {
        padding: 12px 12px 12px 10px;
        border-radius: 12px;
        gap: 8px;
    }

    .timeline__card-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 0.75rem;
        border-radius: 6px;
    }

    .timeline__card-title {
        font-size: 0.75rem;
    }

    .timeline__card-description {
        font-size: 0.65rem;
    }

    .progress-step {
        font-size: 0.5rem;
        padding: 1px 6px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #company-timeline {
        padding: 24px 0 24px;
    }

    .company-timeline__title {
        font-size: 1.3rem;
    }

    .company-timeline__subtitle {
        font-size: 0.72rem;
    }

    .timeline__item {
        padding-left: 28px !important;
        margin-bottom: 18px;
    }

    .timeline__item--left,
    .timeline__item--right {
        padding-left: 28px !important;
    }

    .timeline__line {
        left: 10px;
        width: 2px;
    }

    .timeline__node {
        left: 10px;
        width: 24px;
    }

    .timeline__node-dot {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

    .timeline__year {
        font-size: 0.4rem;
        padding: 0 4px;
    }

    .timeline__card {
        padding: 10px 10px 10px 8px;
        border-radius: 10px;
        gap: 6px;
    }

    .timeline__card-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 0.65rem;
    }

    .timeline__card-title {
        font-size: 0.68rem;
    }

    .timeline__card-description {
        font-size: 0.6rem;
    }

    .progress-steps {
        gap: 2px;
    }

    .progress-step {
        font-size: 0.45rem;
        padding: 1px 4px;
    }
}

/* ============================================================
   AWARDS, ACHIEVEMENTS & CERTIFICATIONS — Responsive (Phase 9)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #awards-certifications {
        padding: 60px 0 60px;
    }

    .awards-certifications__header {
        margin-bottom: 36px;
    }

    .awards-certifications__title {
        font-size: 2.2rem;
    }

    .awards-certifications__subtitle {
        font-size: 0.95rem;
    }

    .awards-certifications__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin-bottom: 36px;
        padding-bottom: 32px;
    }

    .ac-stat__number {
        font-size: 1.8rem;
    }

    .ac-stat__suffix {
        font-size: 1.3rem;
    }

    .ac-stat__label {
        font-size: 0.72rem;
    }

    .awards-certifications__categories {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 36px;
    }

    .ac-category {
        padding: 22px 18px 20px;
        border-radius: 18px;
    }

    .ac-category__title {
        font-size: 1rem;
    }

    .ac-category__description {
        font-size: 0.78rem;
    }

    .ac-badge {
        padding: 8px 12px;
    }

    .ac-badge__label {
        font-size: 0.75rem;
    }

    .ac-achievement {
        padding: 8px 12px;
    }

    .ac-achievement__title {
        font-size: 0.78rem;
    }

    .ac-achievement__description {
        font-size: 0.65rem;
    }

    .ac-category__items--future {
        grid-template-columns: 1fr 1fr;
    }

    .recognition-banner {
        padding: 32px 28px 28px;
        border-radius: 18px;
    }

    .recognition-banner__title {
        font-size: 1.5rem;
    }

    .recognition-banner__description {
        font-size: 0.9rem;
    }

    .btn-recognition {
        padding: 10px 28px;
        font-size: 0.85rem;
    }

    .awards-certifications__orb--1,
    .awards-certifications__orb--2 {
        display: none;
    }

    .awards-certifications__shape--2 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #awards-certifications {
        padding: 40px 0 40px;
    }

    .awards-certifications__header {
        margin-bottom: 28px;
    }

    .awards-certifications__title {
        font-size: 1.8rem;
    }

    .awards-certifications__subtitle {
        font-size: 0.88rem;
    }

    .awards-certifications__stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 380px;
        margin-bottom: 28px;
        padding-bottom: 24px;
    }

    .ac-stat__number {
        font-size: 1.5rem;
    }

    .ac-stat__suffix {
        font-size: 1.1rem;
    }

    .ac-stat__label {
        font-size: 0.65rem;
    }

    .awards-certifications__categories {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }

    .ac-category {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .ac-category__icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .ac-category__title {
        font-size: 0.92rem;
    }

    .ac-category__description {
        font-size: 0.75rem;
    }

    .ac-badge {
        padding: 6px 10px;
        border-radius: 10px;
        gap: 10px;
    }

    .ac-badge__icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.75rem;
    }

    .ac-badge__label {
        font-size: 0.72rem;
    }

    .ac-badge__status {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .ac-achievement {
        padding: 8px 10px;
        border-radius: 10px;
        gap: 10px;
    }

    .ac-achievement__icon {
        font-size: 0.7rem;
    }

    .ac-achievement__title {
        font-size: 0.75rem;
    }

    .ac-achievement__description {
        font-size: 0.6rem;
    }

    .ac-category__items--future {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .ac-future {
        padding: 6px 10px;
        border-radius: 8px;
        gap: 6px;
    }

    .ac-future__icon {
        font-size: 0.9rem;
    }

    .ac-future__label {
        font-size: 0.65rem;
    }

    .recognition-banner {
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .recognition-banner__title {
        font-size: 1.2rem;
    }

    .recognition-banner__description {
        font-size: 0.82rem;
    }

    .btn-recognition {
        padding: 8px 24px;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    .awards-certifications__bg .awards-certifications__shape {
        display: none;
    }

    .awards-certifications__grid {
        opacity: 0.12;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #awards-certifications {
        padding: 32px 0 32px;
    }

    .awards-certifications__title {
        font-size: 1.5rem;
    }

    .awards-certifications__subtitle {
        font-size: 0.8rem;
    }

    .awards-certifications__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
    }

    .ac-stat__number {
        font-size: 1.2rem;
    }

    .ac-stat__suffix {
        font-size: 0.9rem;
    }

    .ac-stat__label {
        font-size: 0.58rem;
    }

    .ac-category {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .ac-category__icon {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }

    .ac-category__title {
        font-size: 0.85rem;
    }

    .ac-category__description {
        font-size: 0.68rem;
    }

    .ac-badge__label {
        font-size: 0.65rem;
    }

    .ac-achievement__title {
        font-size: 0.68rem;
    }

    .ac-achievement__description {
        font-size: 0.55rem;
    }

    .ac-category__items--future {
        grid-template-columns: 1fr 1fr;
    }

    .ac-future__label {
        font-size: 0.58rem;
    }

    .recognition-banner__title {
        font-size: 1.05rem;
    }

    .recognition-banner__description {
        font-size: 0.75rem;
    }

    .btn-recognition {
        font-size: 0.72rem;
        padding: 8px 16px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #awards-certifications {
        padding: 24px 0 24px;
    }

    .awards-certifications__title {
        font-size: 1.3rem;
    }

    .awards-certifications__subtitle {
        font-size: 0.72rem;
    }

    .awards-certifications__stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 280px;
    }

    .ac-stat__number {
        font-size: 1rem;
    }

    .ac-stat__suffix {
        font-size: 0.75rem;
    }

    .ac-stat__label {
        font-size: 0.5rem;
    }

    .ac-category {
        padding: 12px 10px 10px;
        border-radius: 12px;
    }

    .ac-badge {
        padding: 4px 8px;
    }

    .ac-badge__label {
        font-size: 0.58rem;
    }

    .ac-achievement {
        padding: 6px 8px;
    }

    .ac-achievement__title {
        font-size: 0.62rem;
    }

    .ac-achievement__description {
        font-size: 0.5rem;
    }

    .ac-category__items--future {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .ac-future {
        padding: 4px 6px;
    }

    .ac-future__label {
        font-size: 0.5rem;
    }

    .recognition-banner__title {
        font-size: 0.95rem;
    }

    .recognition-banner__description {
        font-size: 0.68rem;
    }
}

/* ============================================================
   OUR WORK CULTURE — Responsive (Phase 10)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #work-culture {
        padding: 60px 0 60px;
    }

    .work-culture__header {
        margin-bottom: 36px;
    }

    .work-culture__title {
        font-size: 2.2rem;
    }

    .work-culture__subtitle {
        font-size: 0.95rem;
    }

    .work-culture__grid {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 36px;
    }

    .work-culture__visual {
        min-height: 340px;
        border-radius: 20px;
    }

    .culture-visual__ring--1 {
        width: 240px;
        height: 240px;
    }

    .culture-visual__ring--2 {
        width: 180px;
        height: 180px;
    }

    .culture-visual__ring--3 {
        width: 120px;
        height: 120px;
    }

    .culture-visual__node {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    .culture-visual__float {
        padding: 6px 12px;
    }

    .culture-visual__float .float-label {
        font-size: 0.55rem;
    }

    .work-culture__intro-title {
        font-size: 1.2rem;
    }

    .work-culture__intro-description {
        font-size: 0.88rem;
    }

    .work-culture__cards {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .culture-card {
        padding: 16px 16px 14px;
        border-radius: 14px;
    }

    .culture-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .culture-card__title {
        font-size: 0.82rem;
    }

    .culture-card__description {
        font-size: 0.72rem;
    }

    .culture-quote-banner {
        padding: 32px 28px 28px;
        border-radius: 18px;
    }

    .culture-quote-banner__text {
        font-size: 1.1rem;
    }

    .work-culture__orb--1,
    .work-culture__orb--3 {
        display: none;
    }

    .work-culture__shape--3 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #work-culture {
        padding: 40px 0 40px;
    }

    .work-culture__header {
        margin-bottom: 28px;
    }

    .work-culture__title {
        font-size: 1.8rem;
    }

    .work-culture__subtitle {
        font-size: 0.88rem;
    }

    .work-culture__grid {
        gap: 28px;
        margin-bottom: 28px;
    }

    .work-culture__visual {
        min-height: 280px;
        border-radius: 16px;
    }

    .culture-visual__center {
        width: 60px;
        height: 60px;
    }

    .culture-visual__center-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .culture-visual__ring--1 {
        width: 200px;
        height: 200px;
    }

    .culture-visual__ring--2 {
        width: 150px;
        height: 150px;
    }

    .culture-visual__ring--3 {
        width: 100px;
        height: 100px;
    }

    .culture-visual__node {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .culture-visual__node--1,
    .culture-visual__node--4,
    .culture-visual__node--6 {
        display: none;
    }

    .culture-visual__float {
        padding: 4px 10px;
    }

    .culture-visual__float .float-emoji {
        font-size: 0.7rem;
    }

    .culture-visual__float .float-label {
        font-size: 0.5rem;
    }

    .culture-visual__float--3,
    .culture-visual__float--4 {
        display: none;
    }

    .work-culture__intro-title {
        font-size: 1.05rem;
    }

    .work-culture__intro-description {
        font-size: 0.82rem;
    }

    .work-culture__cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .culture-card {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .culture-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        margin-bottom: 6px;
        border-radius: 8px;
    }

    .culture-card__title {
        font-size: 0.78rem;
    }

    .culture-card__description {
        font-size: 0.68rem;
    }

    .culture-quote-banner {
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .culture-quote-banner__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 10px;
        border-radius: 12px;
    }

    .culture-quote-banner__text {
        font-size: 0.95rem;
    }

    .culture-quote-banner__author {
        font-size: 0.75rem;
    }

    .work-culture__bg .work-culture__shape {
        display: none;
    }

    .work-culture__network {
        opacity: 0.12;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #work-culture {
        padding: 32px 0 32px;
    }

    .work-culture__title {
        font-size: 1.5rem;
    }

    .work-culture__subtitle {
        font-size: 0.8rem;
    }

    .work-culture__visual {
        min-height: 240px;
    }

    .culture-visual__ring--1 {
        width: 160px;
        height: 160px;
    }

    .culture-visual__ring--2 {
        width: 120px;
        height: 120px;
    }

    .culture-visual__ring--3 {
        width: 80px;
        height: 80px;
    }

    .culture-visual__node {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .culture-visual__float--1,
    .culture-visual__float--2 {
        display: none;
    }

    .work-culture__cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .culture-card {
        padding: 12px 12px 10px;
        border-radius: 10px;
    }

    .culture-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .culture-card__title {
        font-size: 0.72rem;
    }

    .culture-card__description {
        font-size: 0.62rem;
    }

    .culture-quote-banner__text {
        font-size: 0.85rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #work-culture {
        padding: 24px 0 24px;
    }

    .work-culture__title {
        font-size: 1.3rem;
    }

    .work-culture__subtitle {
        font-size: 0.72rem;
    }

    .work-culture__visual {
        min-height: 200px;
    }

    .culture-visual__ring--1 {
        width: 130px;
        height: 130px;
    }

    .culture-visual__ring--2 {
        width: 100px;
        height: 100px;
    }

    .culture-visual__ring--3 {
        width: 70px;
        height: 70px;
    }

    .culture-visual__node {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }

    .culture-visual__node--2,
    .culture-visual__node--5 {
        display: none;
    }

    .culture-visual__float {
        display: none;
    }

    .work-culture__intro-title {
        font-size: 0.95rem;
    }

    .work-culture__intro-description {
        font-size: 0.75rem;
    }

    .culture-card {
        padding: 10px 10px 8px;
        border-radius: 8px;
    }

    .culture-card__icon {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .culture-card__title {
        font-size: 0.65rem;
    }

    .culture-card__description {
        font-size: 0.58rem;
    }

    .culture-quote-banner__text {
        font-size: 0.75rem;
    }
}

/* ============================================================
   CAREERS HERO — Responsive (Phase 1)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #careers-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 30px) 0 50px;
        min-height: auto;
    }

    .careers-hero__inner {
        flex-direction: column;
        gap: 40px;
    }

    .careers-hero__content {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .careers-hero__badge {
        align-self: center;
    }

    .careers-hero__title {
        font-size: 2.8rem;
        text-align: center;
    }

    .careers-hero__title .highlight-lime::after {
        bottom: 0;
        height: 8px;
    }

    .careers-hero__description {
        max-width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .careers-hero__buttons {
        justify-content: center;
    }

    .careers-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
        width: 100%;
        max-width: 480px;
    }

    .highlight-item {
        justify-content: center;
    }

    .highlight-item__content {
        text-align: left;
    }

    .careers-hero__visual {
        flex: none;
        width: 100%;
        min-height: 420px;
    }

    .careers-visual__dashboard {
        max-width: 360px;
    }

    .careers-visual__code {
        right: 2%;
        width: 160px;
    }

    .careers-visual__node--1 {
        left: 0%;
        bottom: 20%;
    }

    .careers-visual__node--2 {
        right: 4%;
        bottom: 2%;
    }

    .careers-visual__node--3 {
        left: 0%;
        top: 25%;
    }

    .careers-hero__orb--1,
    .careers-hero__orb--3 {
        display: none;
    }

    .careers-hero__shape--3 {
        display: none;
    }

    .particle {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #careers-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 24px) 0 40px;
    }

    .careers-hero__inner {
        gap: 32px;
    }

    .careers-hero__title {
        font-size: 2.2rem;
    }

    .careers-hero__title .highlight-lime::after {
        height: 6px;
    }

    .careers-hero__description {
        font-size: 0.88rem;
    }

    .btn-careers-primary,
    .btn-careers-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .careers-hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .careers-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
        max-width: 100%;
    }

    .highlight-item__icon {
        font-size: 1.1rem;
    }

    .highlight-item__title {
        font-size: 0.78rem;
    }

    .highlight-item__text {
        font-size: 0.65rem;
    }

    .careers-hero__visual {
        min-height: 340px;
    }

    .careers-visual__dashboard {
        max-width: 300px;
        padding: 18px 16px 16px;
        border-radius: 18px;
    }

    .dash-stat__value {
        font-size: 0.95rem;
    }

    .dash-stat__label {
        font-size: 0.45rem;
    }

    .dashboard__progress {
        gap: 6px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .progress-label {
        font-size: 0.58rem;
        min-width: 50px;
    }

    .job-title {
        font-size: 0.65rem;
    }

    .careers-visual__code {
        display: none;
    }

    .careers-visual__node {
        padding: 6px 12px;
        border-radius: 10px;
    }

    .careers-visual__node i {
        font-size: 0.7rem;
    }

    .careers-visual__node .node-label {
        font-size: 0.6rem;
    }

    .careers-visual__node--1 {
        bottom: 15%;
        left: -2%;
    }

    .careers-visual__node--2 {
        right: 0%;
        bottom: 0%;
    }

    .careers-visual__node--3 {
        top: 20%;
        left: -2%;
    }

    .careers-visual__orb {
        width: 80px;
        height: 80px;
    }

    .careers-hero__bg .careers-hero__shape {
        display: none;
    }

    .careers-hero__grid {
        opacity: 0.12;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #careers-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 20px) 0 32px;
    }

    .careers-hero__title {
        font-size: 1.8rem;
    }

    .careers-hero__title .highlight-lime::after {
        height: 5px;
    }

    .careers-hero__description {
        font-size: 0.8rem;
    }

    .btn-careers-primary,
    .btn-careers-secondary {
        font-size: 0.78rem;
        padding: 10px 20px;
    }

    .careers-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .highlight-item__icon {
        font-size: 0.95rem;
    }

    .highlight-item__title {
        font-size: 0.7rem;
    }

    .highlight-item__text {
        font-size: 0.58rem;
    }

    .careers-hero__visual {
        min-height: 280px;
    }

    .careers-visual__dashboard {
        max-width: 260px;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .dash-stat__value {
        font-size: 0.8rem;
    }

    .dash-stat__label {
        font-size: 0.4rem;
    }

    .dashboard__stats {
        gap: 4px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .job-item {
        padding: 4px 8px;
    }

    .job-title {
        font-size: 0.6rem;
    }

    .job-tag {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .careers-visual__node {
        display: none;
    }

    .careers-visual__orb {
        width: 60px;
        height: 60px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #careers-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 16px) 0 24px;
    }

    .careers-hero__title {
        font-size: 1.5rem;
    }

    .careers-hero__title .highlight-lime::after {
        height: 4px;
    }

    .careers-hero__description {
        font-size: 0.72rem;
    }

    .careers-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .highlight-item__icon {
        font-size: 0.8rem;
    }

    .highlight-item__title {
        font-size: 0.62rem;
    }

    .highlight-item__text {
        font-size: 0.52rem;
    }

    .careers-visual__dashboard {
        max-width: 220px;
        padding: 12px 10px 10px;
        border-radius: 12px;
    }

    .dash-stat__value {
        font-size: 0.7rem;
    }

    .job-title {
        font-size: 0.55rem;
    }

    .dashboard__footer {
        padding-top: 10px;
    }

    .dash-apply {
        font-size: 0.6rem;
    }

    .dash-status {
        font-size: 0.5rem;
    }

    .careers-visual__orb {
        width: 50px;
        height: 50px;
    }
}

/* ============================================================
   WHY JOIN — Responsive (Phase 2)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #why-join {
        padding: 60px 0 60px;
    }

    .why-join__header {
        margin-bottom: 36px;
    }

    .why-join__title {
        font-size: 2.2rem;
    }

    .why-join__subtitle {
        font-size: 0.95rem;
    }

    .why-join__grid {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 36px;
    }

    .why-join__visual {
        min-height: 320px;
        border-radius: 20px;
    }

    .join-visual__ring--1 {
        width: 240px;
        height: 240px;
    }
    .join-visual__ring--2 {
        width: 180px;
        height: 180px;
    }
    .join-visual__ring--3 {
        width: 120px;
        height: 120px;
    }

    .join-visual__node {
        padding: 4px 10px;
    }

    .join-visual__node .node-label {
        font-size: 0.5rem;
    }

    .join-visual__node i {
        font-size: 0.6rem;
    }

    .join-visual__float {
        padding: 4px 12px;
    }

    .join-visual__float .float-label {
        font-size: 0.5rem;
    }

    .why-join__cards {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .join-card {
        padding: 16px 16px 14px;
        border-radius: 14px;
    }

    .join-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .join-card__title {
        font-size: 0.82rem;
    }

    .join-card__description {
        font-size: 0.72rem;
    }

    .why-join__banner {
        padding: 32px 28px 28px;
        border-radius: 18px;
    }

    .banner-title {
        font-size: 1.5rem;
    }

    .banner-description {
        font-size: 0.9rem;
    }

    .btn-banner {
        padding: 10px 28px;
        font-size: 0.85rem;
    }

    .why-join__orb--1,
    .why-join__orb--3 {
        display: none;
    }

    .why-join__shape--3 {
        display: none;
    }

    #why-join .particle {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #why-join {
        padding: 40px 0 40px;
    }

    .why-join__header {
        margin-bottom: 28px;
    }

    .why-join__title {
        font-size: 1.8rem;
    }

    .why-join__subtitle {
        font-size: 0.88rem;
    }

    .why-join__grid {
        gap: 28px;
        margin-bottom: 28px;
    }

    .why-join__visual {
        min-height: 260px;
        border-radius: 16px;
    }

    .join-visual__center {
        width: 60px;
        height: 60px;
    }

    .join-visual__center-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .join-visual__ring--1 {
        width: 200px;
        height: 200px;
    }
    .join-visual__ring--2 {
        width: 150px;
        height: 150px;
    }
    .join-visual__ring--3 {
        width: 100px;
        height: 100px;
    }

    .join-visual__node {
        padding: 3px 8px;
        border-radius: 8px;
    }

    .join-visual__node .node-label {
        font-size: 0.45rem;
    }

    .join-visual__node i {
        font-size: 0.5rem;
    }

    .join-visual__node--3,
    .join-visual__node--4,
    .join-visual__node--5 {
        display: none;
    }

    .join-visual__float {
        padding: 3px 10px;
    }

    .join-visual__float .float-emoji {
        font-size: 0.7rem;
    }

    .join-visual__float .float-label {
        font-size: 0.45rem;
    }

    .join-visual__float--2,
    .join-visual__float--3 {
        display: none;
    }

    .why-join__cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .join-card {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .join-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        margin-bottom: 6px;
        border-radius: 8px;
    }

    .join-card__title {
        font-size: 0.78rem;
    }

    .join-card__description {
        font-size: 0.68rem;
    }

    .why-join__banner {
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .banner-title {
        font-size: 1.2rem;
    }

    .banner-description {
        font-size: 0.82rem;
    }

    .btn-banner {
        padding: 8px 24px;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    .why-join__bg .why-join__shape {
        display: none;
    }

    .why-join__network {
        opacity: 0.12;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #why-join {
        padding: 32px 0 32px;
    }

    .why-join__title {
        font-size: 1.5rem;
    }

    .why-join__subtitle {
        font-size: 0.8rem;
    }

    .why-join__visual {
        min-height: 220px;
    }

    .join-visual__ring--1 {
        width: 160px;
        height: 160px;
    }
    .join-visual__ring--2 {
        width: 120px;
        height: 120px;
    }
    .join-visual__ring--3 {
        width: 80px;
        height: 80px;
    }

    .join-visual__node--1,
    .join-visual__node--2,
    .join-visual__node--6 {
        display: none;
    }

    .join-visual__float--1 {
        top: 4%;
        left: 4%;
    }

    .why-join__cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .join-card {
        padding: 12px 12px 10px;
        border-radius: 10px;
    }

    .join-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .join-card__title {
        font-size: 0.72rem;
    }

    .join-card__description {
        font-size: 0.62rem;
    }

    .banner-title {
        font-size: 1.05rem;
    }

    .banner-description {
        font-size: 0.75rem;
    }

    .btn-banner {
        font-size: 0.72rem;
        padding: 8px 16px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #why-join {
        padding: 24px 0 24px;
    }

    .why-join__title {
        font-size: 1.3rem;
    }

    .why-join__subtitle {
        font-size: 0.72rem;
    }

    .why-join__visual {
        min-height: 180px;
    }

    .join-visual__ring--1 {
        width: 130px;
        height: 130px;
    }
    .join-visual__ring--2 {
        width: 100px;
        height: 100px;
    }
    .join-visual__ring--3 {
        width: 70px;
        height: 70px;
    }

    .join-visual__center {
        width: 48px;
        height: 48px;
    }

    .join-visual__center-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .join-visual__node,
    .join-visual__float {
        display: none;
    }

    .join-card {
        padding: 10px 10px 8px;
        border-radius: 8px;
    }

    .join-card__icon {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .join-card__title {
        font-size: 0.65rem;
    }

    .join-card__description {
        font-size: 0.58rem;
    }

    .banner-title {
        font-size: 0.95rem;
    }
}

/* ============================================================
   BENEFITS & PERKS — Responsive (Phase 3)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #benefits-perks {
        padding: 60px 0 60px;
    }

    .benefits-perks__header {
        margin-bottom: 36px;
    }

    .benefits-perks__title {
        font-size: 2.2rem;
    }

    .benefits-perks__subtitle {
        font-size: 0.95rem;
    }

    .benefits-perks__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 720px;
        margin-bottom: 36px;
    }

    .benefit-card {
        padding: 20px 18px 18px;
        border-radius: 14px;
    }

    .benefit-card__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .benefit-card__title {
        font-size: 0.85rem;
    }

    .benefit-card__description {
        font-size: 0.74rem;
    }

    .benefits-perks__banner {
        padding: 32px 28px 28px;
        border-radius: 18px;
    }

    .banner-title {
        font-size: 1.4rem;
    }

    .banner-description {
        font-size: 0.88rem;
    }

    .btn-benefits-banner {
        padding: 10px 28px;
        font-size: 0.85rem;
    }

    .benefits-perks__orb--1,
    .benefits-perks__orb--3 {
        display: none;
    }

    .benefits-perks__shape--3 {
        display: none;
    }

    #benefits-perks .particle--3,
    #benefits-perks .particle--5,
    #benefits-perks .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #benefits-perks {
        padding: 40px 0 40px;
    }

    .benefits-perks__header {
        margin-bottom: 28px;
    }

    .benefits-perks__title {
        font-size: 1.8rem;
    }

    .benefits-perks__subtitle {
        font-size: 0.88rem;
    }

    .benefits-perks__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 480px;
        margin-bottom: 28px;
    }

    .benefit-card {
        padding: 16px 14px 14px;
        border-radius: 12px;
    }

    .benefit-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .benefit-card__title {
        font-size: 0.78rem;
    }

    .benefit-card__description {
        font-size: 0.68rem;
    }

    .benefits-perks__banner {
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .banner-title {
        font-size: 1.2rem;
    }

    .banner-description {
        font-size: 0.82rem;
    }

    .btn-benefits-banner {
        padding: 8px 24px;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    .benefits-perks__bg .benefits-perks__shape {
        display: none;
    }

    .benefits-perks__grid {
        opacity: 1;
    }

    #benefits-perks .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #benefits-perks {
        padding: 32px 0 32px;
    }

    .benefits-perks__title {
        font-size: 1.5rem;
    }

    .benefits-perks__subtitle {
        font-size: 0.8rem;
    }

    .benefits-perks__grid {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 340px;
    }

    .benefit-card {
        padding: 14px 12px 12px;
        border-radius: 10px;
    }

    .benefit-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
        border-radius: 8px;
        margin-bottom: 6px;
    }

    .benefit-card__title {
        font-size: 0.72rem;
    }

    .benefit-card__description {
        font-size: 0.62rem;
    }

    .banner-title {
        font-size: 1.05rem;
    }

    .banner-description {
        font-size: 0.75rem;
    }

    .btn-benefits-banner {
        font-size: 0.72rem;
        padding: 8px 16px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #benefits-perks {
        padding: 24px 0 24px;
    }

    .benefits-perks__title {
        font-size: 1.3rem;
    }

    .benefits-perks__subtitle {
        font-size: 0.72rem;
    }

    .benefit-card {
        padding: 12px 10px 10px;
        border-radius: 8px;
    }

    .benefit-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    .benefit-card__title {
        font-size: 0.65rem;
    }

    .benefit-card__description {
        font-size: 0.58rem;
    }

    .banner-title {
        font-size: 0.95rem;
    }

    .banner-description {
        font-size: 0.68rem;
    }

    .btn-benefits-banner {
        font-size: 0.65rem;
        padding: 6px 14px;
    }
}

/* ============================================================
   OPEN POSITIONS — Responsive (Phase 4)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #open-positions {
        padding: 60px 0 60px;
    }

    .open-positions__header {
        margin-bottom: 32px;
    }

    .open-positions__title {
        font-size: 2.2rem;
    }

    .open-positions__subtitle {
        font-size: 0.95rem;
    }

    .open-positions__filters {
        padding: 14px 18px;
        border-radius: 14px;
    }

    .filters__row {
        gap: 10px 14px;
    }

    .filter-group {
        min-width: 120px;
        flex: 1 1 auto;
    }

    .filter-group--search {
        min-width: 150px;
        flex: 2 1 200px;
    }

    .filter-select,
    .filter-input {
        padding: 8px 12px;
        font-size: 0.78rem;
        border-radius: 8px;
    }

    .filter-group--search i {
        left: 12px;
        font-size: 0.75rem;
    }

    .filter-input {
        padding-left: 34px;
    }

    .btn-filter-search,
    .btn-filter-clear {
        padding: 8px 14px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .open-positions__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }

    .job-card {
        padding: 18px 18px 16px;
        border-radius: 14px;
    }

    .job-card__title {
        font-size: 0.95rem;
    }

    .job-card__description {
        font-size: 0.8rem;
    }

    .job-card__info {
        gap: 8px;
    }

    .job-card__location {
        font-size: 0.65rem;
    }

    .job-card__salary {
        font-size: 0.65rem;
    }

    .job-card__date {
        font-size: 0.58rem;
    }

    .btn-job-apply {
        padding: 6px 16px;
        font-size: 0.7rem;
    }

    .open-positions__banner {
        padding: 32px 28px 28px;
        border-radius: 18px;
    }

    .banner-content .banner-title {
        font-size: 1.3rem;
    }

    .banner-content .banner-description {
        font-size: 0.88rem;
    }

    .btn-banner-primary,
    .btn-banner-secondary {
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .open-positions__orb--1,
    .open-positions__orb--2 {
        display: none;
    }

    .open-positions__shape--2 {
        display: none;
    }

    #open-positions .particle--3,
    #open-positions .particle--4 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #open-positions {
        padding: 40px 0 40px;
    }

    .open-positions__header {
        margin-bottom: 24px;
    }

    .open-positions__title {
        font-size: 1.8rem;
    }

    .open-positions__subtitle {
        font-size: 0.88rem;
    }

    .open-positions__filters {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .filters__row {
        flex-direction: column;
        gap: 8px;
    }

    .filter-group {
        min-width: 100%;
        width: 100%;
    }

    .filter-group--search {
        min-width: 100%;
        flex: none;
    }

    .filter-select,
    .filter-input {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .filter-actions {
        width: 100%;
    }

    .btn-filter-search,
    .btn-filter-clear {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.72rem;
    }

    .open-positions__count {
        font-size: 0.78rem;
    }

    .open-positions__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 24px;
    }

    .job-card {
        padding: 16px 16px 14px;
        border-radius: 12px;
    }

    .job-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .job-card__meta {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .job-card__title {
        font-size: 0.9rem;
    }

    .job-card__description {
        font-size: 0.78rem;
    }

    .job-card__tags {
        gap: 4px;
    }

    .job-tag {
        font-size: 0.55rem;
        padding: 2px 10px;
    }

    .job-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .job-card__info {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .btn-job-apply {
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.72rem;
        width: 100%;
    }

    .btn-load-more {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .open-positions__banner {
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .banner-content .banner-title {
        font-size: 1.1rem;
    }

    .banner-content .banner-description {
        font-size: 0.82rem;
    }

    .banner-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn-banner-primary,
    .btn-banner-secondary {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.78rem;
    }

    .open-positions__bg .open-positions__shape {
        display: none;
    }

    .open-positions__grid {
        opacity: 1;
    }

    #open-positions .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #open-positions {
        padding: 32px 0 32px;
    }

    .open-positions__title {
        font-size: 1.5rem;
    }

    .open-positions__subtitle {
        font-size: 0.8rem;
    }

    .open-positions__filters {
        padding: 10px 12px;
    }

    .filter-select,
    .filter-input {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .btn-filter-search,
    .btn-filter-clear {
        font-size: 0.65rem;
        padding: 6px 10px;
    }

    .job-card {
        padding: 14px 12px 12px;
        border-radius: 10px;
    }

    .job-card__title {
        font-size: 0.82rem;
    }

    .job-card__description {
        font-size: 0.72rem;
    }

    .job-tag {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .job-card__location {
        font-size: 0.6rem;
    }

    .job-card__salary {
        font-size: 0.6rem;
    }

    .job-card__date {
        font-size: 0.55rem;
    }

    .btn-job-apply {
        font-size: 0.65rem;
        padding: 6px 12px;
    }

    .btn-load-more {
        font-size: 0.75rem;
        padding: 8px 16px;
    }

    .banner-content .banner-title {
        font-size: 1rem;
    }

    .banner-content .banner-description {
        font-size: 0.75rem;
    }

    .btn-banner-primary,
    .btn-banner-secondary {
        font-size: 0.7rem;
        padding: 8px 16px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #open-positions {
        padding: 24px 0 24px;
    }

    .open-positions__title {
        font-size: 1.3rem;
    }

    .open-positions__subtitle {
        font-size: 0.72rem;
    }

    .job-card {
        padding: 12px 10px 10px;
    }

    .job-card__title {
        font-size: 0.75rem;
    }

    .job-card__description {
        font-size: 0.65rem;
    }

    .job-tag {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .btn-job-apply {
        font-size: 0.6rem;
        padding: 4px 10px;
    }

    .btn-load-more {
        font-size: 0.68rem;
    }
}

/* ============================================================
   HIRING PROCESS — Responsive (Phase 5)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #hiring-process {
        padding: 60px 0 60px;
    }

    .hiring-process__header {
        margin-bottom: 36px;
    }

    .hiring-process__title {
        font-size: 2.2rem;
    }

    .hiring-process__subtitle {
        font-size: 0.95rem;
    }

    .hiring-process__timeline {
        padding: 10px 0 0;
        margin-bottom: 36px;
    }

    .hp-timeline__line {
        left: 24px;
        top: 40px;
        bottom: 30px;
    }

    .hp-step {
        padding-left: 56px !important;
        padding-right: 0 !important;
        flex-direction: row !important;
        text-align: left !important;
        margin-bottom: 32px;
    }

    .hp-step--left,
    .hp-step--right {
        padding-left: 56px !important;
        padding-right: 0 !important;
        flex-direction: row !important;
        text-align: left !important;
    }

    .hp-step--left .hp-step__card,
    .hp-step--right .hp-step__card {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .hp-step__node {
        left: 24px;
        transform: translateX(-50%);
        width: 40px;
    }

    .hp-step__node-dot {
        width: 16px;
        height: 16px;
        border-width: 2.5px;
    }

    .hp-step__number {
        font-size: 0.5rem;
        margin-top: 4px;
        padding: 1px 8px;
    }

    .hp-step__card {
        padding: 16px 18px 16px 16px;
        border-radius: 14px;
        gap: 12px;
    }

    .hp-step__icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 0.85rem;
        border-radius: 8px;
    }

    .hp-step__title {
        font-size: 0.88rem;
    }

    .hp-step__description {
        font-size: 0.76rem;
    }

    .hiring-process__banner {
        padding: 28px 24px 24px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .hp-banner__header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .hp-banner__icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 1rem;
    }

    .hp-banner__title {
        font-size: 1.15rem;
    }

    .hp-banner__description {
        font-size: 0.85rem;
    }

    .hp-banner__highlights {
        flex-direction: column;
        gap: 8px;
    }

    .hp-highlight__text {
        font-size: 0.78rem;
    }

    .hp-cta__title {
        font-size: 1.4rem;
    }

    .hp-cta__description {
        font-size: 0.88rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .hiring-process__orb--1,
    .hiring-process__orb--2 {
        display: none;
    }

    .hiring-process__shape--2 {
        display: none;
    }

    #hiring-process .particle--3,
    #hiring-process .particle--4 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #hiring-process {
        padding: 40px 0 40px;
    }

    .hiring-process__header {
        margin-bottom: 28px;
    }

    .hiring-process__title {
        font-size: 1.8rem;
    }

    .hiring-process__subtitle {
        font-size: 0.88rem;
    }

    .hiring-process__timeline {
        padding: 5px 0 0;
        margin-bottom: 28px;
    }

    .hp-timeline__line {
        left: 18px;
        top: 30px;
        bottom: 20px;
        width: 2.5px;
    }

    .hp-step {
        padding-left: 44px !important;
        margin-bottom: 24px;
    }

    .hp-step--left,
    .hp-step--right {
        padding-left: 44px !important;
    }

    .hp-step__node {
        left: 18px;
        width: 32px;
    }

    .hp-step__node-dot {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

    .hp-step__node-glow {
        inset: -6px;
    }

    .hp-step__number {
        font-size: 0.45rem;
        margin-top: 3px;
        padding: 1px 6px;
    }

    .hp-step__card {
        padding: 14px 14px 14px 12px;
        border-radius: 12px;
        gap: 10px;
    }

    .hp-step__icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .hp-step__title {
        font-size: 0.82rem;
    }

    .hp-step__description {
        font-size: 0.72rem;
    }

    .hiring-process__banner {
        padding: 22px 16px 18px;
        border-radius: 16px;
        margin-bottom: 28px;
    }

    .hp-banner__header {
        gap: 10px;
    }

    .hp-banner__icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 0.9rem;
        border-radius: 12px;
    }

    .hp-banner__title {
        font-size: 1rem;
    }

    .hp-banner__description {
        font-size: 0.8rem;
    }

    .hp-banner__highlights {
        gap: 6px;
    }

    .hp-highlight__text {
        font-size: 0.72rem;
    }

    .hp-highlight__icon {
        font-size: 0.7rem;
    }

    .hp-cta__title {
        font-size: 1.2rem;
    }

    .hp-cta__description {
        font-size: 0.82rem;
    }

    .hp-cta__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .hiring-process__bg .hiring-process__shape {
        display: none;
    }

    .hiring-process__grid {
        opacity: 0.12;
    }

    #hiring-process .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #hiring-process {
        padding: 32px 0 32px;
    }

    .hiring-process__title {
        font-size: 1.5rem;
    }

    .hiring-process__subtitle {
        font-size: 0.8rem;
    }

    .hp-step {
        padding-left: 36px !important;
        margin-bottom: 18px;
    }

    .hp-step--left,
    .hp-step--right {
        padding-left: 36px !important;
    }

    .hp-timeline__line {
        left: 14px;
        width: 2px;
    }

    .hp-step__node {
        left: 14px;
        width: 28px;
    }

    .hp-step__node-dot {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .hp-step__number {
        font-size: 0.4rem;
        padding: 0 4px;
    }

    .hp-step__card {
        padding: 12px 12px 12px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .hp-step__icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    .hp-step__title {
        font-size: 0.75rem;
    }

    .hp-step__description {
        font-size: 0.65rem;
    }

    .hiring-process__banner {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .hp-banner__icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 0.8rem;
    }

    .hp-banner__title {
        font-size: 0.92rem;
    }

    .hp-banner__description {
        font-size: 0.75rem;
    }

    .hp-highlight__text {
        font-size: 0.65rem;
    }

    .hp-cta__title {
        font-size: 1.05rem;
    }

    .hp-cta__description {
        font-size: 0.75rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        font-size: 0.78rem;
        padding: 10px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #hiring-process {
        padding: 24px 0 24px;
    }

    .hiring-process__title {
        font-size: 1.3rem;
    }

    .hiring-process__subtitle {
        font-size: 0.72rem;
    }

    .hp-step {
        padding-left: 30px !important;
        margin-bottom: 16px;
    }

    .hp-step--left,
    .hp-step--right {
        padding-left: 30px !important;
    }

    .hp-timeline__line {
        left: 11px;
    }

    .hp-step__node {
        left: 11px;
        width: 24px;
    }

    .hp-step__node-dot {
        width: 10px;
        height: 10px;
    }

    .hp-step__card {
        padding: 10px 10px 10px 8px;
        border-radius: 8px;
    }

    .hp-step__icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.55rem;
    }

    .hp-step__title {
        font-size: 0.68rem;
    }

    .hp-step__description {
        font-size: 0.6rem;
    }

    .hiring-process__banner {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .hp-banner__title {
        font-size: 0.82rem;
    }

    .hp-banner__description {
        font-size: 0.68rem;
    }

    .hp-highlight__text {
        font-size: 0.58rem;
    }

    .hp-cta__title {
        font-size: 0.95rem;
    }

    .hp-cta__description {
        font-size: 0.68rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        font-size: 0.7rem;
        padding: 8px 16px;
    }
}

/* ============================================================
   CAREERS FAQ — Responsive (Phase 6)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #careers-faq {
        padding: 60px 0 60px;
    }

    .careers-faq__header {
        margin-bottom: 36px;
    }

    .careers-faq__title {
        font-size: 2.2rem;
    }

    .careers-faq__subtitle {
        font-size: 0.95rem;
    }

    .careers-faq__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .careers-faq__intro {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        align-items: stretch;
    }

    .faq-intro__content {
        flex: 2;
        min-width: 280px;
        padding: 28px 24px 24px;
    }

    .faq-intro__visual {
        flex: 1;
        min-width: 200px;
        height: auto;
        min-height: 180px;
    }

    .faq-intro__buttons {
        flex-direction: row;
    }

    .btn-faq-intro,
    .btn-faq-intro-secondary {
        width: auto;
        flex: 1;
    }

    .careers-faq__accordion {
        gap: 8px;
    }

    .faq-item__trigger {
        padding: 14px 16px 14px 14px;
        font-size: 0.85rem;
        gap: 12px;
    }

    .faq-item__icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.7rem;
    }

    .faq-item__indicator {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.65rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 16px 16px 16px;
    }

    .faq-item__answer-content {
        font-size: 0.8rem;
    }

    .faq-visual__node {
        width: 30px;
        height: 30px;
        font-size: 0.65rem;
    }

    .faq-visual__orb--1 {
        width: 60px;
        height: 60px;
    }
    .faq-visual__orb--2 {
        width: 45px;
        height: 45px;
    }
    .faq-visual__orb--3 {
        width: 30px;
        height: 30px;
    }

    .careers-faq__orb--1,
    .careers-faq__orb--2 {
        display: none;
    }

    .careers-faq__shape--2 {
        display: none;
    }

    #careers-faq .particle--3,
    #careers-faq .particle--4 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #careers-faq {
        padding: 40px 0 40px;
    }

    .careers-faq__header {
        margin-bottom: 28px;
    }

    .careers-faq__title {
        font-size: 1.8rem;
    }

    .careers-faq__subtitle {
        font-size: 0.88rem;
    }

    .careers-faq__grid {
        gap: 28px;
    }

    .careers-faq__intro {
        flex-direction: column;
        gap: 16px;
    }

    .faq-intro__content {
        min-width: auto;
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .faq-intro__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .faq-intro__title {
        font-size: 1.1rem;
    }

    .faq-intro__description {
        font-size: 0.82rem;
    }

    .faq-intro__buttons {
        flex-direction: column;
        gap: 8px;
    }

    .btn-faq-intro,
    .btn-faq-intro-secondary {
        width: 100%;
        padding: 10px 20px;
        font-size: 0.8rem;
    }

    .faq-intro__visual {
        min-height: 140px;
        border-radius: 14px;
    }

    .faq-visual__node {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .faq-visual__node--1 {
        top: 12%;
        right: 15%;
    }
    .faq-visual__node--2 {
        bottom: 12%;
        left: 18%;
    }

    .faq-visual__orb--1 {
        width: 50px;
        height: 50px;
    }
    .faq-visual__orb--2 {
        width: 35px;
        height: 35px;
    }
    .faq-visual__orb--3 {
        width: 25px;
        height: 25px;
    }

    .careers-faq__accordion {
        gap: 6px;
    }

    .faq-item {
        border-radius: 12px;
    }

    .faq-item__trigger {
        padding: 12px 14px 12px 12px;
        font-size: 0.8rem;
        gap: 10px;
    }

    .faq-item__icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.6rem;
        border-radius: 6px;
    }

    .faq-item__question {
        font-size: 0.78rem;
    }

    .faq-item__indicator {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.55rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 14px 14px 14px;
        max-height: 300px;
    }

    .faq-item__answer-content {
        font-size: 0.75rem;
        padding-top: 4px;
    }

    .careers-faq__bg .careers-faq__shape {
        display: none;
    }

    .careers-faq__grid {
        opacity: 1;
    }

    #careers-faq .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #careers-faq {
        padding: 32px 0 32px;
    }

    .careers-faq__title {
        font-size: 1.5rem;
    }

    .careers-faq__subtitle {
        font-size: 0.8rem;
    }

    .faq-intro__content {
        padding: 20px 14px 16px;
        border-radius: 14px;
    }

    .faq-intro__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .faq-intro__title {
        font-size: 0.95rem;
    }

    .faq-intro__description {
        font-size: 0.75rem;
    }

    .faq-intro__visual {
        min-height: 100px;
        border-radius: 12px;
    }

    .faq-visual__node {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }

    .faq-item__trigger {
        padding: 10px 12px 10px 10px;
        font-size: 0.75rem;
        gap: 8px;
    }

    .faq-item__icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.5rem;
    }

    .faq-item__question {
        font-size: 0.72rem;
    }

    .faq-item__indicator {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.5rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 12px 12px 12px;
    }

    .faq-item__answer-content {
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #careers-faq {
        padding: 24px 0 24px;
    }

    .careers-faq__title {
        font-size: 1.3rem;
    }

    .careers-faq__subtitle {
        font-size: 0.72rem;
    }

    .faq-intro__content {
        padding: 16px 12px 14px;
        border-radius: 12px;
    }

    .faq-intro__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .faq-intro__title {
        font-size: 0.85rem;
    }

    .faq-intro__description {
        font-size: 0.68rem;
    }

    .faq-intro__visual {
        min-height: 80px;
    }

    .faq-visual__node {
        width: 20px;
        height: 20px;
        font-size: 0.45rem;
    }

    .faq-item__trigger {
        padding: 8px 10px 8px 8px;
        font-size: 0.68rem;
        gap: 6px;
    }

    .faq-item__icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.45rem;
    }

    .faq-item__question {
        font-size: 0.65rem;
    }

    .faq-item__indicator {
        width: 16px;
        height: 16px;
        min-width: 16px;
        font-size: 0.45rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 10px 10px 10px;
    }

    .faq-item__answer-content {
        font-size: 0.62rem;
    }
}

/* ============================================================
   FINAL CTA — Responsive (Phase 7)
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
    #careers-cta {
        padding: 60px 0 60px;
    }

    .careers-cta__header {
        margin-bottom: 36px;
    }

    .careers-cta__title {
        font-size: 2.4rem;
    }

    .careers-cta__subtitle {
        font-size: 0.95rem;
    }

    .careers-cta__banner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 36px 32px 32px;
        border-radius: 24px;
    }

    .careers-cta__visual {
        min-height: 260px;
        order: -1;
    }

    .cta-visual__ring--1 {
        width: 240px;
        height: 240px;
    }
    .cta-visual__ring--2 {
        width: 180px;
        height: 180px;
    }
    .cta-visual__ring--3 {
        width: 120px;
        height: 120px;
    }

    .cta-visual__node {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    .cta-visual__node--1,
    .cta-visual__node--5 {
        display: none;
    }

    .cta-visual__float {
        padding: 4px 12px;
    }

    .cta-visual__float .float-label {
        font-size: 0.55rem;
    }

    .cta-visual__float--3 {
        display: none;
    }

    .cta-visual__deco {
        display: none;
    }

    .careers-cta__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }

    .cta-highlight {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .cta-highlight__icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.8rem;
    }

    .cta-highlight__title {
        font-size: 0.82rem;
    }

    .cta-highlight__description {
        font-size: 0.68rem;
    }

    .careers-cta__buttons {
        flex-wrap: wrap;
    }

    .btn-cta-primary,
    .btn-cta-secondary,
    .btn-cta-outline {
        padding: 12px 24px;
        font-size: 0.88rem;
    }

    .careers-cta__orb--1,
    .careers-cta__orb--3 {
        display: none;
    }

    .careers-cta__shape--3 {
        display: none;
    }

    #careers-cta .particle--3,
    #careers-cta .particle--5,
    #careers-cta .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #careers-cta {
        padding: 40px 0 40px;
    }

    .careers-cta__header {
        margin-bottom: 28px;
    }

    .careers-cta__title {
        font-size: 1.8rem;
    }

    .careers-cta__subtitle {
        font-size: 0.88rem;
    }

    .careers-cta__banner {
        padding: 24px 18px 22px;
        border-radius: 20px;
        gap: 28px;
    }

    .careers-cta__visual {
        min-height: 200px;
    }

    .cta-visual__center {
        width: 60px;
        height: 60px;
    }

    .cta-visual__center-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .cta-visual__ring--1 {
        width: 180px;
        height: 180px;
    }
    .cta-visual__ring--2 {
        width: 140px;
        height: 140px;
    }
    .cta-visual__ring--3 {
        width: 90px;
        height: 90px;
    }

    .cta-visual__node {
        width: 30px;
        height: 30px;
        font-size: 0.65rem;
    }

    .cta-visual__node--2,
    .cta-visual__node--4,
    .cta-visual__node--6 {
        display: none;
    }

    .cta-visual__float {
        padding: 3px 10px;
    }

    .cta-visual__float .float-emoji {
        font-size: 0.7rem;
    }

    .cta-visual__float .float-label {
        font-size: 0.5rem;
    }

    .cta-visual__float--2 {
        bottom: 4%;
        right: 3%;
    }

    .careers-cta__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .cta-highlight {
        padding: 10px 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .cta-highlight__icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.7rem;
        border-radius: 8px;
    }

    .cta-highlight__title {
        font-size: 0.75rem;
    }

    .cta-highlight__description {
        font-size: 0.62rem;
    }

    .careers-cta__buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .btn-cta-primary,
    .btn-cta-secondary,
    .btn-cta-outline {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .careers-cta__note {
        font-size: 0.75rem;
        text-align: center;
    }

    .careers-cta__bg .careers-cta__shape {
        display: none;
    }

    .careers-cta__grid {
        opacity: 0.1;
    }

    #careers-cta .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #careers-cta {
        padding: 32px 0 32px;
    }

    .careers-cta__title {
        font-size: 1.5rem;
    }

    .careers-cta__subtitle {
        font-size: 0.8rem;
    }

    .careers-cta__banner {
        padding: 18px 14px 16px;
        border-radius: 16px;
        gap: 20px;
    }

    .careers-cta__visual {
        min-height: 160px;
    }

    .cta-visual__center {
        width: 48px;
        height: 48px;
    }

    .cta-visual__center-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .cta-visual__ring--1 {
        width: 140px;
        height: 140px;
    }
    .cta-visual__ring--2 {
        width: 110px;
        height: 110px;
    }
    .cta-visual__ring--3 {
        width: 70px;
        height: 70px;
    }

    .cta-visual__node {
        width: 26px;
        height: 26px;
        font-size: 0.55rem;
    }

    .cta-visual__node--3 {
        display: none;
    }

    .cta-visual__float {
        padding: 2px 8px;
    }

    .cta-visual__float .float-emoji {
        font-size: 0.6rem;
    }

    .cta-visual__float .float-label {
        font-size: 0.45rem;
    }

    .cta-visual__float--2 {
        display: none;
    }

    .careers-cta__highlights {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .cta-highlight {
        padding: 8px 10px;
    }

    .cta-highlight__icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.6rem;
    }

    .cta-highlight__title {
        font-size: 0.7rem;
    }

    .cta-highlight__description {
        font-size: 0.58rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary,
    .btn-cta-outline {
        padding: 10px 18px;
        font-size: 0.78rem;
    }

    .careers-cta__note {
        font-size: 0.68rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #careers-cta {
        padding: 24px 0 24px;
    }

    .careers-cta__title {
        font-size: 1.3rem;
    }

    .careers-cta__subtitle {
        font-size: 0.72rem;
    }

    .careers-cta__banner {
        padding: 14px 10px 12px;
        border-radius: 14px;
    }

    .careers-cta__visual {
        min-height: 130px;
    }

    .cta-visual__center {
        width: 40px;
        height: 40px;
    }

    .cta-visual__center-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .cta-visual__ring--1 {
        width: 110px;
        height: 110px;
    }
    .cta-visual__ring--2 {
        width: 85px;
        height: 85px;
    }
    .cta-visual__ring--3 {
        width: 60px;
        height: 60px;
    }

    .cta-visual__node {
        width: 22px;
        height: 22px;
        font-size: 0.45rem;
    }

    .cta-visual__node--1,
    .cta-visual__node--4 {
        display: none;
    }

    .cta-visual__float {
        display: none;
    }

    .cta-highlight {
        padding: 6px 8px;
    }

    .cta-highlight__icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.5rem;
    }

    .cta-highlight__title {
        font-size: 0.62rem;
    }

    .cta-highlight__description {
        font-size: 0.52rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary,
    .btn-cta-outline {
        padding: 8px 14px;
        font-size: 0.7rem;
    }

    .careers-cta__note {
        font-size: 0.6rem;
    }
}

/* ==================== START RESPONSIVE CSS ==================== */
/* --- 1400px - 1600px - 1920px (Large Desktops) --- */
@media (min-width: 1400px) {
  .hero-container {
    max-width: 1400px;
  }

  .hero-heading {
    font-size: 4rem;
  }

  .illustration-container {
    height: 550px;
  }

  .float-card--dashboard {
    width: 230px;
  }

  .float-card--browser {
    width: 220px;
  }

  .float-card--mobile {
    width: 165px;
  }

  .float-card--ai {
    width: 145px;
  }

  .float-card--tech {
    width: 175px;
  }

  .trust-card {
    padding: 34px 24px;
  }

  .trust-number {
    font-size: 2.7rem;
  }
}

/* --- 1200px - 1399px --- */
@media (max-width: 1399px) and (min-width: 1200px) {
  .hero-container {
    max-width: 1180px;
  }

  .hero-grid {
    gap: 50px;
  }

  .illustration-container {
    height: 480px;
  }
}

/* --- 992px - 1199px (Tablets Landscape / Small Laptops) --- */
@media (max-width: 1199px) {
  .hero-container {
    padding: 0 32px;
  }

  .hero-grid {
    gap: 40px;
  }

  .hero-heading {
    font-size: clamp(2rem, 4vw, 3rem);
  }

  .illustration-container {
    height: 440px;
  }

  .float-card--dashboard {
    width: 180px;
  }

  .float-card--browser {
    width: 170px;
  }

  .float-card--mobile {
    width: 135px;
  }

  .float-card--ai {
    width: 115px;
  }

  .float-card--tech {
    width: 140px;
  }

  .trust-indicators {
    gap: 18px;
  }

  .trust-card {
    padding: 22px 16px;
  }

  .trust-number {
    font-size: 2rem;
  }
}

/* --- 768px - 991px (Tablets) --- */
@media (max-width: 991px) {
  .case-studies-hero {
    padding: 100px 0 60px;
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
    margin-bottom: 50px;
  }

  .hero-content {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
  }

  .hero-description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .illustration-container {
    height: 380px;
    max-width: 520px;
    margin: 0 auto;
  }

  .float-card--1 {
    top: 0%;
    left: 2%;
  }
  .float-card--2 {
    top: -5%;
    right: 2%;
  }
  .float-card--3 {
    top: 30%;
    right: 8%;
  }
  .float-card--4 {
    bottom: 25%;
    left: 5%;
  }
  .float-card--5 {
    bottom: 35%;
    right: 0%;
  }

  .trust-indicators {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
  }

  .trust-card {
    padding: 26px 20px;
  }
}

/* --- 576px - 767px (Large Phones / Small Tablets) --- */
@media (max-width: 767px) {
  .case-studies-hero {
    padding: 80px 0 50px;
  }

  .hero-container {
    padding: 0 20px;
  }

  .hero-grid {
    gap: 40px;
    margin-bottom: 40px;
  }

  .hero-label {
    font-size: 0.72rem;
    padding: 7px 15px;
  }

  .hero-heading {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 14px 24px;
    font-size: 0.95rem;
  }

  .illustration-container {
    height: 320px;
    max-width: 420px;
    margin: 0 auto;
  }

  .float-card--dashboard {
    width: 150px;
  }
  .float-card--browser {
    width: 145px;
  }
  .float-card--mobile {
    width: 115px;
  }
  .float-card--ai {
    width: 100px;
  }
  .float-card--tech {
    width: 120px;
  }

  .glass-card-inner {
    padding: 12px 14px;
    border-radius: 14px;
  }

  .dashboard-title {
    font-size: 0.6rem;
  }

  .dashboard-chart {
    height: 40px;
    gap: 4px;
  }

  .mini-stat-value {
    font-size: 0.7rem;
  }

  .mini-stat-label {
    font-size: 0.58rem;
  }

  .trust-indicators {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .trust-card {
    padding: 20px 14px;
    border-radius: 16px;
  }

  .trust-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    margin-bottom: 10px;
  }

  .trust-icon-wrapper svg {
    width: 22px;
    height: 22px;
  }

  .trust-number {
    font-size: 1.7rem;
  }

  .trust-label {
    font-size: 0.75rem;
  }
}

/* --- 425px - 575px --- */
@media (max-width: 575px) {
  .case-studies-hero {
    padding: 70px 0 40px;
  }

  .hero-container {
    padding: 0 16px;
  }

  .hero-grid {
    gap: 30px;
    margin-bottom: 35px;
  }

  .hero-heading {
    font-size: 1.65rem;
    letter-spacing: -0.02em;
  }

  .hero-description {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .btn {
    padding: 13px 20px;
    font-size: 0.9rem;
    max-width: 280px;
  }

  .illustration-container {
    height: 270px;
    max-width: 340px;
    margin: 0 auto;
  }

  .float-card--dashboard {
    width: 125px;
  }
  .float-card--browser {
    width: 120px;
  }
  .float-card--mobile {
    width: 95px;
  }
  .float-card--ai {
    width: 85px;
  }
  .float-card--tech {
    width: 100px;
  }

  .glass-card-inner {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .dashboard-chart {
    height: 32px;
    gap: 3px;
  }

  .dashboard-stats {
    gap: 8px;
  }

  .chart-bar {
    border-radius: 3px 3px 0 0;
  }

  .code-snippet {
    font-size: 0.55rem;
    padding: 5px 7px;
  }

  .trust-indicators {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .trust-card {
    padding: 16px 10px;
    border-radius: 14px;
  }

  .trust-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .trust-icon-wrapper svg {
    width: 18px;
    height: 18px;
  }

  .trust-number {
    font-size: 1.4rem;
  }

  .trust-label {
    font-size: 0.7rem;
  }
}

/* --- 375px --- */
@media (max-width: 424px) {
  .hero-heading {
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: 0.85rem;
  }

  .illustration-container {
    height: 240px;
    max-width: 290px;
    margin: 0 auto;
  }

  .float-card--dashboard {
    width: 105px;
  }
  .float-card--browser {
    width: 100px;
  }
  .float-card--mobile {
    width: 80px;
  }
  .float-card--ai {
    width: 70px;
  }
  .float-card--tech {
    width: 85px;
  }

  .glass-card-inner {
    padding: 8px 10px;
    border-radius: 10px;
  }

  .trust-indicators {
    gap: 8px;
  }

  .trust-card {
    padding: 14px 8px;
    border-radius: 12px;
  }

  .trust-number {
    font-size: 1.2rem;
  }

  .trust-label {
    font-size: 0.65rem;
  }
}

/* --- 320px --- */
@media (max-width: 374px) {
  .hero-container {
    padding: 0 10px;
  }

  .hero-heading {
    font-size: 1.35rem;
  }

  .hero-description {
    font-size: 0.8rem;
  }

  .btn {
    padding: 11px 16px;
    font-size: 0.82rem;
    max-width: 240px;
  }

  .illustration-container {
    height: 210px;
    max-width: 250px;
    margin: 0 auto;
  }

  .float-card--dashboard {
    width: 90px;
  }
  .float-card--browser {
    width: 85px;
  }
  .float-card--mobile {
    width: 68px;
  }
  .float-card--ai {
    width: 60px;
  }
  .float-card--tech {
    width: 72px;
  }

  .glass-card-inner {
    padding: 6px 8px;
    border-radius: 8px;
  }

  .dashboard-chart {
    height: 24px;
    gap: 2px;
  }

  .trust-indicators {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .trust-card {
    padding: 12px 6px;
    border-radius: 10px;
  }

  .trust-icon-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    margin-bottom: 6px;
  }

  .trust-icon-wrapper svg {
    width: 16px;
    height: 16px;
  }

  .trust-number {
    font-size: 1.1rem;
  }

  .trust-label {
    font-size: 0.6rem;
  }
}

/* ==================== START RESPONSIVE CSS ==================== */
/* --- 1400px - 1920px --- */
@media (min-width: 1400px) {
  .metrics-container {
    max-width: 1340px;
  }

  .metrics-grid {
    gap: 26px;
  }

  .metric-card {
    padding: 34px 26px 30px;
  }

  .metric-number {
    font-size: 2.6rem;
  }

  .achievement-banner {
    padding: 50px 56px;
  }
}

/* --- 1200px - 1399px --- */
@media (max-width: 1399px) and (min-width: 1200px) {
  .metrics-container {
    max-width: 1180px;
  }

  .metrics-grid {
    gap: 20px;
  }
}

/* --- 992px - 1199px --- */
@media (max-width: 1199px) {
  .metrics-container {
    padding: 0 32px;
  }

  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .metric-card {
    padding: 24px 16px 22px;
    border-radius: 16px;
  }

  .metric-number {
    font-size: 1.9rem;
  }

  .metric-title {
    font-size: 0.8rem;
  }

  .metric-desc {
    font-size: 0.7rem;
  }

  .metric-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    margin-bottom: 10px;
  }

  .metric-icon-wrap svg {
    width: 22px;
    height: 22px;
  }

  .achievement-banner {
    padding: 36px 34px;
    border-radius: 20px;
  }
}

/* --- 768px - 991px --- */
@media (max-width: 991px) {
  .success-metrics {
    padding: 80px 0 70px;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 44px;
  }

  .metric-card {
    padding: 28px 20px 24px;
    border-radius: 18px;
  }

  .metric-number {
    font-size: 2.1rem;
  }

  .metric-title {
    font-size: 0.85rem;
  }

  .metric-desc {
    font-size: 0.73rem;
  }

  .metrics-header {
    margin-bottom: 44px;
  }

  .achievement-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .achievement-banner-description {
    max-width: 100%;
  }

  .achievement-banner {
    padding: 32px 28px;
    border-radius: 18px;
  }
}

/* --- 576px - 767px --- */
@media (max-width: 767px) {
  .success-metrics {
    padding: 64px 0 54px;
  }

  .metrics-container {
    padding: 0 20px;
  }

  .metrics-label {
    font-size: 0.7rem;
    padding: 7px 16px;
    letter-spacing: 0.18em;
  }

  .metrics-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .metrics-description {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .metrics-header {
    margin-bottom: 34px;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 34px;
  }

  .metric-card {
    padding: 22px 14px 20px;
    border-radius: 14px;
  }

  .metric-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .metric-icon-wrap svg {
    width: 20px;
    height: 20px;
  }

  .metric-number {
    font-size: 1.7rem;
  }

  .metric-title {
    font-size: 0.78rem;
  }

  .metric-desc {
    font-size: 0.68rem;
  }

  .metric-glow {
    border-radius: 14px;
  }

  .achievement-banner {
    padding: 26px 20px;
    border-radius: 16px;
  }

  .achievement-banner-heading {
    font-size: 1.2rem;
  }

  .achievement-banner-description {
    font-size: 0.85rem;
  }

  .achievement-banner-btn {
    padding: 12px 22px;
    font-size: 0.88rem;
  }
}

/* --- 425px - 575px --- */
@media (max-width: 575px) {
  .success-metrics {
    padding: 50px 0 44px;
  }

  .metrics-container {
    padding: 0 16px;
  }

  .metrics-heading {
    font-size: 1.45rem;
  }

  .metrics-description {
    font-size: 0.82rem;
  }

  .metrics-grid {
    gap: 10px;
    margin-bottom: 28px;
  }

  .metric-card {
    padding: 18px 10px 16px;
    border-radius: 12px;
  }

  .metric-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    margin-bottom: 6px;
  }

  .metric-icon-wrap svg {
    width: 17px;
    height: 17px;
  }

  .metric-number {
    font-size: 1.4rem;
  }

  .metric-title {
    font-size: 0.7rem;
  }

  .metric-desc {
    font-size: 0.62rem;
  }

  .metric-glow {
    border-radius: 12px;
  }

  .achievement-banner {
    padding: 22px 16px;
    border-radius: 14px;
  }

  .achievement-banner-heading {
    font-size: 1.05rem;
  }

  .achievement-banner-description {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .achievement-banner-btn {
    padding: 11px 20px;
    font-size: 0.82rem;
    width: 100%;
    justify-content: center;
  }
}

/* --- 375px --- */
@media (max-width: 424px) {
  .metrics-heading {
    font-size: 1.3rem;
  }

  .metrics-description {
    font-size: 0.76rem;
  }

  .metrics-grid {
    gap: 8px;
  }

  .metric-card {
    padding: 15px 8px 14px;
    border-radius: 10px;
  }

  .metric-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    margin-bottom: 5px;
  }

  .metric-icon-wrap svg {
    width: 15px;
    height: 15px;
  }

  .metric-number {
    font-size: 1.2rem;
  }

  .metric-title {
    font-size: 0.65rem;
  }

  .metric-desc {
    font-size: 0.58rem;
  }

  .metric-glow {
    border-radius: 10px;
  }

  .achievement-banner {
    padding: 18px 14px;
    border-radius: 12px;
  }

  .achievement-banner-heading {
    font-size: 0.95rem;
  }

  .achievement-banner-description {
    font-size: 0.72rem;
  }

  .achievement-banner-btn {
    padding: 10px 18px;
    font-size: 0.78rem;
  }
}

/* --- 320px --- */
@media (max-width: 374px) {
  .metrics-container {
    padding: 0 10px;
  }

  .metrics-heading {
    font-size: 1.15rem;
  }

  .metrics-description {
    font-size: 0.7rem;
  }

  .metrics-grid {
    gap: 6px;
  }

  .metric-card {
    padding: 12px 6px 10px;
    border-radius: 8px;
  }

  .metric-icon-wrap {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    margin-bottom: 4px;
  }

  .metric-icon-wrap svg {
    width: 13px;
    height: 13px;
  }

  .metric-number {
    font-size: 1.05rem;
  }

  .metric-title {
    font-size: 0.6rem;
  }

  .metric-desc {
    font-size: 0.52rem;
  }

  .metric-glow {
    border-radius: 8px;
  }

  .achievement-banner {
    padding: 15px 10px;
    border-radius: 10px;
  }

  .achievement-banner-heading {
    font-size: 0.85rem;
  }

  .achievement-banner-description {
    font-size: 0.66rem;
  }

  .achievement-banner-btn {
    padding: 9px 15px;
    font-size: 0.72rem;
    gap: 6px;
  }

  .achievement-banner-btn svg {
    width: 15px;
    height: 15px;
  }
}

/* ==================================================
START: Featured Case Studies Responsive
================================================== */
/* --- 1400px - 1920px --- */
@media (min-width: 1400px) {
  .featured-container {
    max-width: 1340px;
  }

  .featured-grid {
    gap: 32px;
  }

  .project-card {
    border-radius: 24px;
  }

  .project-thumb {
    height: 200px;
  }

  .project-body {
    padding: 26px 28px 28px;
  }
}

/* --- 1200px - 1399px --- */
@media (max-width: 1399px) and (min-width: 1200px) {
  .featured-container {
    max-width: 1180px;
  }

  .featured-grid {
    gap: 24px;
  }
}

/* --- 992px - 1199px --- */
@media (max-width: 1199px) {
  .featured-container {
    padding: 0 32px;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .project-thumb {
    height: 160px;
  }

  .project-body {
    padding: 20px 20px 22px;
  }

  .project-title {
    font-size: 1.1rem;
  }

  .project-excerpt {
    font-size: 0.82rem;
  }
}

/* --- 768px - 991px --- */
@media (max-width: 991px) {
  .featured-case-studies {
    padding: 80px 0 70px;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 40px;
  }

  .project-thumb {
    height: 150px;
  }

  .project-badge {
    top: 10px;
    left: 10px;
    font-size: 0.65rem;
    padding: 4px 10px;
  }

  .featured-header {
    margin-bottom: 44px;
  }
}

/* --- 576px - 767px --- */
@media (max-width: 767px) {
  .featured-case-studies {
    padding: 64px 0 54px;
  }

  .featured-container {
    padding: 0 20px;
  }

  .featured-label {
    font-size: 0.7rem;
    padding: 7px 16px;
    letter-spacing: 0.18em;
  }

  .featured-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .featured-description {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .featured-header {
    margin-bottom: 34px;
  }

  .featured-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 34px;
  }

  .project-thumb {
    height: 180px;
  }

  .project-body {
    padding: 20px 20px 22px;
  }

  .featured-view-all {
    padding: 13px 26px;
    font-size: 0.95rem;
  }
}

/* --- 425px - 575px --- */
@media (max-width: 575px) {
  .featured-case-studies {
    padding: 50px 0 44px;
  }

  .featured-container {
    padding: 0 16px;
  }

  .featured-heading {
    font-size: 1.45rem;
  }

  .featured-description {
    font-size: 0.82rem;
  }

  .project-thumb {
    height: 150px;
  }

  .project-title {
    font-size: 1rem;
  }

  .project-excerpt {
    font-size: 0.78rem;
  }

  .tech-chip {
    font-size: 0.62rem;
    padding: 3px 8px;
  }

  .result-highlight {
    font-size: 0.72rem;
    padding: 5px 10px;
  }

  .project-link {
    font-size: 0.8rem;
  }

  .featured-view-all {
    padding: 12px 22px;
    font-size: 0.88rem;
    width: 100%;
    justify-content: center;
  }
}

/* --- 375px --- */
@media (max-width: 424px) {
  .featured-heading {
    font-size: 1.3rem;
  }

  .featured-description {
    font-size: 0.76rem;
  }

  .project-thumb {
    height: 130px;
  }

  .project-body {
    padding: 16px 16px 18px;
  }

  .project-badge {
    top: 8px;
    left: 8px;
    font-size: 0.6rem;
  }

  .featured-view-all {
    padding: 11px 18px;
    font-size: 0.82rem;
  }
}

/* --- 320px --- */
@media (max-width: 374px) {
  .featured-container {
    padding: 0 10px;
  }

  .featured-heading {
    font-size: 1.15rem;
  }

  .featured-description {
    font-size: 0.7rem;
  }

  .project-thumb {
    height: 110px;
  }

  .project-title {
    font-size: 0.9rem;
  }

  .project-excerpt {
    font-size: 0.7rem;
  }

  .tech-chip {
    font-size: 0.58rem;
  }

  .result-highlight {
    font-size: 0.66rem;
  }

  .project-link {
    font-size: 0.72rem;
  }

  .featured-view-all {
    padding: 10px 16px;
    font-size: 0.75rem;
    gap: 6px;
  }
}

/* ==================================================
START: Project Categories Filter Responsive
================================================== */
/* --- 1200px - 1399px --- */
@media (max-width: 1399px) and (min-width: 1200px) {
  .filter-container {
    max-width: 1180px;
  }
}

/* --- 992px - 1199px --- */
@media (max-width: 1199px) {
  .filter-container {
    padding: 0 32px;
  }
  .filter-chip {
    font-size: 0.8rem;
    padding: 9px 18px;
  }
}

/* --- 768px - 991px --- */
@media (max-width: 991px) {
  .project-filter {
    padding: 70px 0 40px;
  }
  .filter-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.15) transparent;
    gap: 10px;
  }
  .filter-controls::-webkit-scrollbar {
    height: 5px;
  }
  .filter-controls::-webkit-scrollbar-track {
    background: transparent;
  }
  .filter-controls::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.15);
    border-radius: 10px;
  }
  .filter-chip {
    flex-shrink: 0;
    font-size: 0.82rem;
    padding: 10px 18px;
  }
}

/* --- 576px - 767px --- */
@media (max-width: 767px) {
  .project-filter {
    padding: 54px 0 34px;
  }
  .filter-container {
    padding: 0 20px;
  }
  .filter-label {
    font-size: 0.7rem;
    padding: 7px 16px;
    letter-spacing: 0.18em;
  }
  .filter-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .filter-description {
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .filter-header {
    margin-bottom: 34px;
  }
  .filter-chip {
    font-size: 0.78rem;
    padding: 8px 16px;
    gap: 6px;
  }
  .filter-chip-icon svg {
    width: 16px;
    height: 16px;
  }
  .filter-active-count {
    font-size: 0.8rem;
  }
}

/* --- 425px - 575px --- */
@media (max-width: 575px) {
  .project-filter {
    padding: 44px 0 30px;
  }
  .filter-container {
    padding: 0 16px;
  }
  .filter-heading {
    font-size: 1.45rem;
  }
  .filter-description {
    font-size: 0.82rem;
  }
  .filter-controls {
    gap: 8px;
  }
  .filter-chip {
    font-size: 0.72rem;
    padding: 7px 14px;
  }
  .filter-active-count {
    font-size: 0.75rem;
  }
}

/* --- 375px --- */
@media (max-width: 424px) {
  .filter-heading {
    font-size: 1.3rem;
  }
  .filter-description {
    font-size: 0.76rem;
  }
  .filter-chip {
    font-size: 0.7rem;
    padding: 6px 12px;
    gap: 4px;
  }
}

/* --- 320px --- */
@media (max-width: 374px) {
  .filter-container {
    padding: 0 10px;
  }
  .filter-heading {
    font-size: 1.15rem;
  }
  .filter-description {
    font-size: 0.7rem;
  }
  .filter-chip {
    font-size: 0.65rem;
    padding: 5px 10px;
  }
  .filter-chip-icon svg {
    width: 14px;
    height: 14px;
  }
}

/* ==================================================
START: Detailed Case Study Showcase Responsive
================================================== */
/* --- 1200px - 1399px --- */
@media (max-width: 1399px) and (min-width: 1200px) {
  .showcase-container {
    max-width: 1180px;
  }
}

/* --- 992px - 1199px --- */
@media (max-width: 1199px) {
  .showcase-container {
    padding: 0 32px;
  }
  .showcase-layout {
    gap: 36px;
  }
  .showcase-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- 768px - 991px --- */
@media (max-width: 991px) {
  .case-showcase {
    padding: 80px 0 70px;
  }
  .showcase-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .showcase-image-area {
    min-height: 320px;
    height: auto;
  }
  .showcase-info-grid {
    grid-template-columns: 1fr 1fr;
  }
  .showcase-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 576px - 767px --- */
@media (max-width: 767px) {
  .case-showcase {
    padding: 64px 0 54px;
  }
  .showcase-container {
    padding: 0 20px;
  }
  .showcase-label {
    font-size: 0.7rem;
    padding: 7px 16px;
  }
  .showcase-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .showcase-description {
    font-size: 0.9rem;
  }
  .showcase-project-title {
    font-size: 1.6rem;
  }
  .showcase-overview {
    font-size: 0.9rem;
  }
  .showcase-info-grid {
    grid-template-columns: 1fr;
  }
  .showcase-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .metric-value {
    font-size: 1.8rem;
  }
  .btn-showcase {
    width: 100%;
    justify-content: center;
  }
}

/* --- 425px - 575px --- */
@media (max-width: 575px) {
  .case-showcase {
    padding: 50px 0 44px;
  }
  .showcase-container {
    padding: 0 16px;
  }
  .showcase-heading {
    font-size: 1.45rem;
  }
  .showcase-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metric-item {
    padding: 18px 12px;
  }
  .metric-value {
    font-size: 1.5rem;
  }
}

/* --- 375px --- */
@media (max-width: 424px) {
  .showcase-heading {
    font-size: 1.3rem;
  }
  .showcase-project-title {
    font-size: 1.35rem;
  }
  .info-card {
    padding: 16px 14px;
  }
  .metric-value {
    font-size: 1.3rem;
  }
}

/* --- 320px --- */
@media (max-width: 374px) {
  .showcase-container {
    padding: 0 10px;
  }
  .showcase-heading {
    font-size: 1.15rem;
  }
  .showcase-project-title {
    font-size: 1.2rem;
  }
  .showcase-overview {
    font-size: 0.8rem;
  }
  .info-card-title {
    font-size: 0.85rem;
  }
  .btn-showcase {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* ==================================================
START: Our Development Approach Responsive
================================================== */
/* --- 1200px - 1399px --- */
@media (max-width: 1399px) and (min-width: 1200px) {
  .approach-container {
    max-width: 1180px;
  }
}

/* --- 992px - 1199px --- */
@media (max-width: 1199px) {
  .approach-container {
    padding: 0 32px;
  }
  .approach-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

/* --- 768px - 991px --- */
@media (max-width: 991px) {
  .dev-approach {
    padding: 80px 0 70px;
  }
  .approach-steps {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
  }
  .approach-banner-content {
    flex-direction: column;
    text-align: center;
  }
  .approach-banner-desc {
    max-width: 100%;
  }
  .approach-banner-actions {
    justify-content: center;
    width: 100%;
  }
}

/* --- 576px - 767px --- */
@media (max-width: 767px) {
  .dev-approach {
    padding: 64px 0 54px;
  }
  .approach-container {
    padding: 0 20px;
  }
  .approach-label {
    font-size: 0.7rem;
    padding: 7px 16px;
  }
  .approach-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .approach-description {
    font-size: 0.9rem;
  }
  .approach-steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .step-card {
    padding: 24px 20px 22px;
  }
  .approach-banner {
    padding: 30px 24px;
  }
  .approach-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  .approach-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- 425px - 575px --- */
@media (max-width: 575px) {
  .dev-approach {
    padding: 50px 0 44px;
  }
  .approach-container {
    padding: 0 16px;
  }
  .approach-heading {
    font-size: 1.45rem;
  }
  .step-card {
    padding: 20px 18px 18px;
    border-radius: 18px;
  }
}

/* --- 375px --- */
@media (max-width: 424px) {
  .approach-heading {
    font-size: 1.3rem;
  }
  .approach-description {
    font-size: 0.8rem;
  }
  .step-title {
    font-size: 1rem;
  }
  .step-desc {
    font-size: 0.82rem;
  }
  .approach-banner-title {
    font-size: 1.1rem;
  }
}

/* --- 320px --- */
@media (max-width: 374px) {
  .approach-container {
    padding: 0 10px;
  }
  .approach-heading {
    font-size: 1.15rem;
  }
  .step-card {
    padding: 16px 14px 14px;
    border-radius: 16px;
  }
  .approach-banner {
    padding: 20px 14px;
  }
  .approach-btn {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* ==================================================
START: Technologies Used Across Projects Responsive
================================================== */
/* 1200px - 1399px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .tech-stack-container {
    max-width: 1180px;
  }
}

/* 992px - 1199px */
@media (max-width: 1199px) {
  .tech-stack-container {
    padding: 0 32px;
  }
  .ts-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

/* 768px - 991px */
@media (max-width: 991px) {
  .tech-stack {
    padding: 80px 0 70px;
  }
  .ts-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .ts-banner-content {
    flex-direction: column;
    text-align: center;
  }
  .ts-banner-desc {
    max-width: 100%;
  }
  .ts-banner-actions {
    justify-content: center;
    width: 100%;
  }
}

/* 576px - 767px */
@media (max-width: 767px) {
  .tech-stack {
    padding: 64px 0 54px;
  }
  .tech-stack-container {
    padding: 0 20px;
  }
  .ts-label {
    font-size: 0.7rem;
    padding: 7px 16px;
  }
  .ts-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .ts-description {
    font-size: 0.9rem;
  }
  .ts-categories {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ts-category {
    padding: 24px 20px 22px;
  }
  .ts-banner {
    padding: 30px 24px;
  }
  .ts-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  .ts-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 425px - 575px */
@media (max-width: 575px) {
  .tech-stack {
    padding: 50px 0 44px;
  }
  .tech-stack-container {
    padding: 0 16px;
  }
  .ts-heading {
    font-size: 1.45rem;
  }
  .ts-category {
    padding: 20px 18px 18px;
    border-radius: 18px;
  }
}

/* 375px */
@media (max-width: 424px) {
  .ts-heading {
    font-size: 1.3rem;
  }
  .ts-description {
    font-size: 0.8rem;
  }
  .ts-cat-title {
    font-size: 1rem;
  }
  .ts-badge {
    font-size: 0.68rem;
    padding: 4px 10px;
  }
  .ts-banner-title {
    font-size: 1.1rem;
  }
}

/* 320px */
@media (max-width: 374px) {
  .tech-stack-container {
    padding: 0 10px;
  }
  .ts-heading {
    font-size: 1.15rem;
  }
  .ts-category {
    padding: 16px 14px 14px;
    border-radius: 16px;
  }
  .ts-banner {
    padding: 20px 14px;
  }
  .ts-btn {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* ==================================================
START: Client Success Stories Responsive
================================================== */
/* 1200px - 1399px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .stories-container {
    max-width: 1180px;
  }
}

/* 992px - 1199px */
@media (max-width: 1199px) {
  .stories-container {
    padding: 0 32px;
  }
  .carousel-track {
    gap: 20px;
  }
  .story-card {
    flex: 0 0 calc((100% - 20px) / 2); /* 2 cards per view */
    max-width: calc((100% - 20px) / 2);
  }
}

/* 768px - 991px */
@media (max-width: 991px) {
  .client-stories {
    padding: 80px 0 70px;
  }
  .story-card {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
  .stories-banner-content {
    flex-direction: column;
    text-align: center;
  }
  .stories-banner-desc {
    max-width: 100%;
  }
  .stories-banner-actions {
    justify-content: center;
    width: 100%;
  }
}

/* 576px - 767px */
@media (max-width: 767px) {
  .client-stories {
    padding: 64px 0 54px;
  }
  .stories-container {
    padding: 0 20px;
  }
  .stories-label {
    font-size: 0.7rem;
    padding: 7px 16px;
  }
  .stories-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .stories-description {
    font-size: 0.9rem;
  }
  .carousel-track {
    gap: 16px;
  }
  .story-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .stories-banner {
    padding: 30px 24px;
  }
  .stories-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  .stories-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 425px - 575px */
@media (max-width: 575px) {
  .client-stories {
    padding: 50px 0 44px;
  }
  .stories-container {
    padding: 0 16px;
  }
  .stories-heading {
    font-size: 1.45rem;
  }
  .story-card-inner {
    padding: 22px 18px 20px;
  }
  .stories-banner {
    padding: 24px 20px;
  }
}

/* 375px */
@media (max-width: 424px) {
  .stories-heading {
    font-size: 1.3rem;
  }
  .story-client-name {
    font-size: 1.1rem;
  }
  .stories-btn {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* 320px */
@media (max-width: 374px) {
  .stories-container {
    padding: 0 10px;
  }
  .stories-heading {
    font-size: 1.15rem;
  }
  .stories-banner-title {
    font-size: 1.1rem;
  }
}

/* ==================================================
START: Industries We've Helped Responsive
================================================== */
/* 1200px - 1399px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .industries-container {
    max-width: 1180px;
  }
  .ind-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* 992px - 1199px */
@media (max-width: 1199px) {
  .industries-container {
    padding: 0 32px;
  }
  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

/* 768px - 991px */
@media (max-width: 991px) {
  .industries-section {
    padding: 80px 0 70px;
  }
  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .industries-banner-content {
    flex-direction: column;
    text-align: center;
  }
  .ind-banner-desc {
    max-width: 100%;
  }
  .ind-banner-actions {
    justify-content: center;
    width: 100%;
  }
}

/* 576px - 767px */
@media (max-width: 767px) {
  .industries-section {
    padding: 64px 0 54px;
  }
  .industries-container {
    padding: 0 20px;
  }
  .ind-label {
    font-size: 0.7rem;
    padding: 7px 16px;
  }
  .ind-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .ind-description {
    font-size: 0.9rem;
  }
  .ind-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .industry-card {
    padding: 24px 20px 22px;
  }
  .industries-banner {
    padding: 30px 24px;
  }
  .ind-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  .ind-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 425px - 575px */
@media (max-width: 575px) {
  .industries-section {
    padding: 50px 0 44px;
  }
  .industries-container {
    padding: 0 16px;
  }
  .ind-heading {
    font-size: 1.45rem;
  }
  .industry-card {
    padding: 20px 18px 18px;
    border-radius: 18px;
  }
}

/* 375px */
@media (max-width: 424px) {
  .ind-heading {
    font-size: 1.3rem;
  }
  .ind-card-title {
    font-size: 1rem;
  }
  .ind-btn {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* 320px */
@media (max-width: 374px) {
  .industries-container {
    padding: 0 10px;
  }
  .ind-heading {
    font-size: 1.15rem;
  }
  .ind-banner-title {
    font-size: 1.1rem;
  }
}

/* ==================================================
START: Frequently Asked Questions Responsive
================================================== */
/* 1200px - 1399px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .faq-container {
    max-width: 820px;
  }
}

/* 992px - 1199px */
@media (max-width: 1199px) {
  .faq-container {
    padding: 0 32px;
  }
}

/* 768px - 991px */
@media (max-width: 991px) {
  .faq-section {
    padding: 80px 0 70px;
  }
  .faq-banner-content {
    flex-direction: column;
    text-align: center;
  }
  .faq-banner-desc {
    max-width: 100%;
  }
  .faq-banner-actions {
    justify-content: center;
    width: 100%;
  }
}

/* 576px - 767px */
@media (max-width: 767px) {
  .faq-section {
    padding: 64px 0 54px;
  }
  .faq-container {
    padding: 0 20px;
  }
  .faq-label {
    font-size: 0.7rem;
    padding: 7px 16px;
  }
  .faq-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .faq-description {
    font-size: 0.9rem;
  }
  .faq-question {
    font-size: 0.95rem;
    padding: 18px 20px;
  }
  .faq-answer {
    padding: 0 20px 18px;
    font-size: 0.88rem;
  }
  .faq-banner {
    padding: 30px 24px;
  }
  .faq-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  .faq-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 425px - 575px */
@media (max-width: 575px) {
  .faq-section {
    padding: 50px 0 44px;
  }
  .faq-container {
    padding: 0 16px;
  }
  .faq-heading {
    font-size: 1.45rem;
  }
  .faq-item {
    border-radius: 14px;
  }
}

/* 375px */
@media (max-width: 424px) {
  .faq-heading {
    font-size: 1.3rem;
  }
  .faq-question {
    font-size: 0.9rem;
  }
  .faq-btn {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* 320px */
@media (max-width: 374px) {
  .faq-container {
    padding: 0 10px;
  }
  .faq-heading {
    font-size: 1.15rem;
  }
  .faq-banner-title {
    font-size: 1.1rem;
  }
}

/* ==================================================
START: Final Call To Action Responsive
================================================== */
/* 1200px - 1399px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .cta-container {
    max-width: 1180px;
  }
}

/* 992px - 1199px */
@media (max-width: 1199px) {
  .cta-container {
    padding: 0 32px;
  }
  .cta-grid {
    gap: 40px;
  }
}

/* 768px - 991px */
@media (max-width: 991px) {
  .cta-final {
    padding: 80px 0 70px;
  }
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .cta-visual {
    order: -1; /* visual on top */
  }
  .visual-card {
    max-width: 500px;
    margin: 0 auto;
  }
  .cta-checklist {
    grid-template-columns: 1fr;
  }
}

/* 576px - 767px */
@media (max-width: 767px) {
  .cta-final {
    padding: 64px 0 54px;
  }
  .cta-container {
    padding: 0 20px;
  }
  .cta-label {
    font-size: 0.7rem;
    padding: 7px 16px;
  }
  .cta-heading {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .cta-description {
    font-size: 0.9rem;
  }
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-btn {
    width: 100%;
    justify-content: center;
  }
  .cta-link {
    justify-content: center;
    margin-left: 0;
  }
  .cta-trust {
    flex-direction: column;
  }
  .trust-badge {
    justify-content: center;
  }
}

/* 425px - 575px */
@media (max-width: 575px) {
  .cta-final {
    padding: 50px 0 44px;
  }
  .cta-container {
    padding: 0 16px;
  }
  .cta-heading {
    font-size: 1.45rem;
  }
  .visual-card {
    padding: 24px 20px;
  }
}

/* 375px */
@media (max-width: 424px) {
  .cta-heading {
    font-size: 1.3rem;
  }
  .cta-description {
    font-size: 0.85rem;
  }
  .cta-checklist-item {
    font-size: 0.82rem;
  }
}

/* 320px */
@media (max-width: 374px) {
  .cta-container {
    padding: 0 10px;
  }
  .cta-heading {
    font-size: 1.2rem;
  }
  .cta-btn {
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* ==================================================
START: Portfolio Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #portfolio-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 30px) 0 50px;
        min-height: auto;
    }

    .portfolio-hero__inner {
        flex-direction: column;
        gap: 40px;
    }

    .portfolio-hero__content {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .portfolio-hero__badge {
        align-self: center;
    }

    .portfolio-hero__title {
        font-size: 2.6rem;
        text-align: center;
    }

    .portfolio-hero__title .highlight-lime::after {
        bottom: 0;
        height: 8px;
    }

    .portfolio-hero__description {
        max-width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .portfolio-hero__buttons {
        justify-content: center;
    }

    .portfolio-hero__trust {
        justify-content: center;
    }

    .portfolio-hero__visual {
        flex: none;
        width: 100%;
        min-height: 420px;
    }

    .portfolio-visual__dashboard {
        max-width: 360px;
    }

    .portfolio-visual__float--1 {
        top: 0%;
        right: 0%;
    }
    .portfolio-visual__float--2 {
        bottom: 15%;
        left: -2%;
    }
    .portfolio-visual__float--3 {
        bottom: 0%;
        right: 5%;
    }
    .portfolio-visual__float--4 {
        top: 18%;
        left: -2%;
    }

    .portfolio-visual__tech {
        display: none;
    }

    .portfolio-hero__orb--1,
    .portfolio-hero__orb--3 {
        display: none;
    }

    .portfolio-hero__shape--3 {
        display: none;
    }

    #portfolio-hero .particle--3,
    #portfolio-hero .particle--5,
    #portfolio-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #portfolio-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 24px) 0 40px;
    }

    .portfolio-hero__inner {
        gap: 32px;
    }

    .portfolio-hero__title {
        font-size: 2rem;
    }

    .portfolio-hero__title .highlight-lime::after {
        height: 6px;
    }

    .portfolio-hero__description {
        font-size: 0.88rem;
    }

    .btn-portfolio-primary,
    .btn-portfolio-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .portfolio-hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .portfolio-hero__trust {
        gap: 10px 16px;
    }

    .trust-badge {
        font-size: 0.72rem;
    }

    .trust-badge__icon {
        font-size: 0.7rem;
    }

    .portfolio-hero__visual {
        min-height: 340px;
    }

    .portfolio-visual__dashboard {
        max-width: 300px;
        padding: 18px 16px 16px;
        border-radius: 18px;
    }

    .dashboard__project {
        padding: 8px 12px;
        border-radius: 10px;
    }

    .project-preview__thumb {
        width: 30px;
        height: 30px;
    }

    .project-preview__name {
        font-size: 0.68rem;
    }

    .project-preview__category {
        font-size: 0.55rem;
    }

    .portfolio-visual__float {
        padding: 6px 12px;
        border-radius: 10px;
        max-width: 120px;
    }

    .portfolio-visual__float .float-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.6rem;
    }

    .portfolio-visual__float .float-label {
        font-size: 0.4rem;
    }

    .portfolio-visual__float .float-value {
        font-size: 0.6rem;
    }

    .portfolio-visual__float--2,
    .portfolio-visual__float--4 {
        display: none;
    }

    .portfolio-visual__float--1 {
        top: 0%;
        right: 0%;
    }
    .portfolio-visual__float--3 {
        bottom: 0%;
        right: 2%;
    }

    .portfolio-visual__orb {
        width: 80px;
        height: 80px;
    }

    .portfolio-hero__bg .portfolio-hero__shape {
        display: none;
    }

    .portfolio-hero__grid {
        opacity: 0.1;
    }

    #portfolio-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #portfolio-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 20px) 0 32px;
    }

    .portfolio-hero__title {
        font-size: 1.6rem;
    }

    .portfolio-hero__title .highlight-lime::after {
        height: 5px;
    }

    .portfolio-hero__description {
        font-size: 0.8rem;
    }

    .btn-portfolio-primary,
    .btn-portfolio-secondary {
        font-size: 0.78rem;
        padding: 10px 20px;
    }

    .trust-badge {
        font-size: 0.65rem;
    }

    .portfolio-hero__visual {
        min-height: 280px;
    }

    .portfolio-visual__dashboard {
        max-width: 260px;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .project-preview__thumb {
        width: 26px;
        height: 26px;
    }

    .project-preview__name {
        font-size: 0.62rem;
    }

    .project-preview__category {
        font-size: 0.5rem;
    }

    .portfolio-visual__float--1,
    .portfolio-visual__float--3 {
        display: none;
    }

    .portfolio-visual__orb {
        width: 60px;
        height: 60px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #portfolio-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 16px) 0 24px;
    }

    .portfolio-hero__title {
        font-size: 1.3rem;
    }

    .portfolio-hero__title .highlight-lime::after {
        height: 4px;
    }

    .portfolio-hero__description {
        font-size: 0.72rem;
    }

    .portfolio-hero__trust {
        gap: 6px 12px;
    }

    .trust-badge {
        font-size: 0.58rem;
    }

    .portfolio-visual__dashboard {
        max-width: 220px;
        padding: 12px 10px 10px;
        border-radius: 12px;
    }

    .dashboard__project {
        padding: 6px 10px;
    }

    .project-preview__thumb {
        width: 22px;
        height: 22px;
    }

    .project-preview__name {
        font-size: 0.55rem;
    }

    .project-preview__category {
        font-size: 0.45rem;
    }

    .dash-projects {
        font-size: 0.6rem;
    }

    .dash-status {
        font-size: 0.5rem;
    }

    .portfolio-visual__orb {
        width: 50px;
        height: 50px;
    }
}

/* ==================================================
END: Portfolio Hero Banner Responsive
================================================== */

/* ==================================================
START: Portfolio Statistics Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #portfolio-stats {
        padding: 60px 0 60px;
    }

    .portfolio-stats__header {
        margin-bottom: 36px;
    }

    .portfolio-stats__title {
        font-size: 2.2rem;
    }

    .portfolio-stats__subtitle {
        font-size: 0.95rem;
    }

    .portfolio-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin-bottom: 32px;
    }

    .stat-card {
        padding: 26px 18px 22px;
        border-radius: 16px;
    }

    .stat-card__icon {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .stat-card__number {
        font-size: 2.6rem;
    }

    .stat-suffix {
        font-size: 1.8rem;
    }

    .stat-card__title {
        font-size: 0.95rem;
    }

    .stat-card__description {
        font-size: 0.76rem;
    }

    .portfolio-stats__strip {
        padding: 18px 20px;
        border-radius: 14px;
    }

    .achievement-strip__inner {
        gap: 12px 20px;
    }

    .achievement-item {
        font-size: 0.78rem;
    }

    .portfolio-stats__orb--1,
    .portfolio-stats__orb--2 {
        display: none;
    }

    .portfolio-stats__shape--2 {
        display: none;
    }

    #portfolio-stats .particle--3,
    #portfolio-stats .particle--5,
    #portfolio-stats .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #portfolio-stats {
        padding: 40px 0 40px;
    }

    .portfolio-stats__header {
        margin-bottom: 28px;
    }

    .portfolio-stats__title {
        font-size: 1.8rem;
    }

    .portfolio-stats__subtitle {
        font-size: 0.88rem;
    }

    .portfolio-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .stat-card {
        padding: 20px 14px 18px;
        border-radius: 14px;
    }

    .stat-card__icon {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .stat-card__number {
        font-size: 2rem;
    }

    .stat-suffix {
        font-size: 1.4rem;
    }

    .stat-card__title {
        font-size: 0.85rem;
    }

    .stat-card__description {
        font-size: 0.7rem;
    }

    .portfolio-stats__strip {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .achievement-strip__inner {
        gap: 8px 16px;
    }

    .achievement-item {
        font-size: 0.72rem;
        gap: 6px;
    }

    .achievement-item__icon {
        font-size: 0.7rem;
    }

    .portfolio-stats__bg .portfolio-stats__shape {
        display: none;
    }

    .portfolio-stats__grid {
        opacity: 1;
    }

    #portfolio-stats .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #portfolio-stats {
        padding: 32px 0 32px;
    }

    .portfolio-stats__title {
        font-size: 1.5rem;
    }

    .portfolio-stats__subtitle {
        font-size: 0.8rem;
    }

    .portfolio-stats__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .stat-card {
        padding: 16px 14px 14px;
        border-radius: 12px;
    }

    .stat-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .stat-card__number {
        font-size: 1.8rem;
    }

    .stat-suffix {
        font-size: 1.2rem;
    }

    .stat-card__title {
        font-size: 0.8rem;
    }

    .stat-card__description {
        font-size: 0.65rem;
    }

    .portfolio-stats__strip {
        padding: 12px 12px;
    }

    .achievement-strip__inner {
        gap: 6px 12px;
    }

    .achievement-item {
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #portfolio-stats {
        padding: 24px 0 24px;
    }

    .portfolio-stats__title {
        font-size: 1.3rem;
    }

    .portfolio-stats__subtitle {
        font-size: 0.72rem;
    }

    .stat-card {
        padding: 14px 12px 12px;
        border-radius: 10px;
    }

    .stat-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .stat-card__number {
        font-size: 1.5rem;
    }

    .stat-suffix {
        font-size: 1rem;
    }

    .stat-card__title {
        font-size: 0.72rem;
    }

    .stat-card__description {
        font-size: 0.58rem;
    }

    .achievement-item {
        font-size: 0.58rem;
    }
}

/* ==================================================
END: Portfolio Statistics Responsive
================================================== */

/* ==================================================
START: Portfolio Categories & Filters Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #portfolio-filters {
        padding: 60px 0 60px;
    }

    .portfolio-filters__header {
        margin-bottom: 32px;
    }

    .portfolio-filters__title {
        font-size: 2.2rem;
    }

    .portfolio-filters__subtitle {
        font-size: 0.95rem;
    }

    .portfolio-filters__nav {
        gap: 6px 10px;
        padding: 4px;
    }

    .filter-btn {
        padding: 8px 14px 8px 12px;
        font-size: 0.78rem;
    }

    .filter-btn__icon {
        font-size: 0.7rem;
    }

    .filter-btn__count {
        font-size: 0.55rem;
        padding: 0 6px;
    }

    .portfolio-filters__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 28px;
    }

    .project-card__content {
        padding: 16px 16px 18px;
    }

    .project-card__title {
        font-size: 0.92rem;
    }

    .project-card__description {
        font-size: 0.78rem;
    }

    .portfolio-filters__orb--1,
    .portfolio-filters__orb--2 {
        display: none;
    }

    .portfolio-filters__shape--2 {
        display: none;
    }

    #portfolio-filters .particle--3,
    #portfolio-filters .particle--5,
    #portfolio-filters .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #portfolio-filters {
        padding: 40px 0 40px;
    }

    .portfolio-filters__header {
        margin-bottom: 24px;
    }

    .portfolio-filters__title {
        font-size: 1.8rem;
    }

    .portfolio-filters__subtitle {
        font-size: 0.88rem;
    }

    .portfolio-filters__nav {
        gap: 6px 8px;
        padding: 2px;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .portfolio-filters__nav::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        padding: 6px 12px 6px 10px;
        font-size: 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .filter-btn__icon {
        font-size: 0.6rem;
    }

    .filter-btn__count {
        font-size: 0.5rem;
        padding: 0 5px;
    }

    .portfolio-filters__results {
        font-size: 0.82rem;
        margin-bottom: 24px;
    }

    .portfolio-filters__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 24px;
    }

    .project-card__content {
        padding: 14px 14px 16px;
    }

    .project-card__title {
        font-size: 0.85rem;
    }

    .project-card__description {
        font-size: 0.72rem;
        margin-bottom: 8px;
    }

    .project-card__tech {
        gap: 4px;
        margin-bottom: 10px;
    }

    .project-card__tech span {
        font-size: 0.48rem;
        padding: 1px 8px;
    }

    .project-card__link {
        font-size: 0.72rem;
    }

    .placeholder-content i {
        font-size: 1.8rem;
    }

    .placeholder-content span {
        font-size: 0.7rem;
    }

    .btn-load-more {
        padding: 10px 24px;
        font-size: 0.78rem;
        width: 100%;
        justify-content: center;
    }

    .portfolio-filters__bg .portfolio-filters__shape {
        display: none;
    }

    .portfolio-filters__grid {
        opacity: 1;
    }

    #portfolio-filters .particle {
        display: none;
    }

    .empty-state__icon {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }

    .empty-state__title {
        font-size: 1.1rem;
    }

    .empty-state__description {
        font-size: 0.8rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #portfolio-filters {
        padding: 32px 0 32px;
    }

    .portfolio-filters__title {
        font-size: 1.5rem;
    }

    .portfolio-filters__subtitle {
        font-size: 0.8rem;
    }

    .filter-btn {
        padding: 4px 10px 4px 8px;
        font-size: 0.62rem;
    }

    .filter-btn__icon {
        font-size: 0.5rem;
    }

    .filter-btn__count {
        font-size: 0.45rem;
        padding: 0 4px;
    }

    .portfolio-filters__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
        margin: 0 auto 24px;
    }

    .project-card__content {
        padding: 12px 12px 14px;
    }

    .project-card__title {
        font-size: 0.8rem;
    }

    .project-card__description {
        font-size: 0.68rem;
    }

    .project-card__tech span {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .project-card__link {
        font-size: 0.68rem;
    }

    .btn-load-more {
        padding: 8px 20px;
        font-size: 0.72rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #portfolio-filters {
        padding: 24px 0 24px;
    }

    .portfolio-filters__title {
        font-size: 1.3rem;
    }

    .portfolio-filters__subtitle {
        font-size: 0.72rem;
    }

    .filter-btn {
        padding: 3px 8px 3px 6px;
        font-size: 0.55rem;
    }

    .filter-btn__icon {
        font-size: 0.45rem;
    }

    .project-card__content {
        padding: 10px 10px 12px;
    }

    .project-card__title {
        font-size: 0.72rem;
    }

    .project-card__description {
        font-size: 0.62rem;
    }

    .project-card__tech span {
        font-size: 0.4rem;
        padding: 0 4px;
    }

    .project-card__link {
        font-size: 0.62rem;
    }
}

/* ==================================================
END: Portfolio Categories & Filters Responsive
================================================== */

/* ==================================================
START: Featured Projects Showcase Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #featured-projects {
        padding: 60px 0 60px;
    }

    .featured-projects__header {
        margin-bottom: 36px;
    }

    .featured-projects__title {
        font-size: 2.2rem;
    }

    .featured-projects__subtitle {
        font-size: 0.95rem;
    }

    .featured-projects__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 32px;
    }

    .project-card__content {
        padding: 18px 18px 20px;
    }

    .project-card__title {
        font-size: 1rem;
    }

    .project-card__description {
        font-size: 0.8rem;
    }

    .overlay__buttons {
        gap: 8px;
    }

    .overlay-btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .overlay-btn i {
        font-size: 0.6rem;
    }

    .btn-projects-cta {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .featured-projects__orb--1,
    .featured-projects__orb--2 {
        display: none;
    }

    .featured-projects__shape--2 {
        display: none;
    }

    #featured-projects .particle--3,
    #featured-projects .particle--5,
    #featured-projects .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #featured-projects {
        padding: 40px 0 40px;
    }

    .featured-projects__header {
        margin-bottom: 28px;
    }

    .featured-projects__title {
        font-size: 1.8rem;
    }

    .featured-projects__subtitle {
        font-size: 0.88rem;
    }

    .featured-projects__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }

    .project-card__content {
        padding: 14px 14px 16px;
    }

    .project-card__title {
        font-size: 0.9rem;
    }

    .project-card__client {
        font-size: 0.72rem;
        gap: 8px;
    }

    .project-card__description {
        font-size: 0.75rem;
        margin-bottom: 10px;
    }

    .project-card__tech {
        gap: 4px;
        margin-bottom: 10px;
    }

    .project-card__tech span {
        font-size: 0.48rem;
        padding: 1px 8px;
    }

    .project-card__footer {
        padding-top: 10px;
    }

    .project-card__year {
        font-size: 0.6rem;
    }

    .project-card__link {
        font-size: 0.72rem;
    }

    .project-card__overlay {
        backdrop-filter: blur(3px);
    }

    .overlay__buttons {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .overlay-btn {
        padding: 4px 10px;
        font-size: 0.55rem;
        gap: 4px;
    }

    .overlay-btn i {
        font-size: 0.5rem;
    }

    .overlay-btn--outline {
        display: none;
    }

    .project-card__featured-badge {
        top: 10px;
        right: 10px;
        font-size: 0.45rem;
        padding: 2px 10px;
    }

    .placeholder-content i {
        font-size: 2rem;
    }

    .placeholder-content span {
        font-size: 0.7rem;
    }

    .btn-projects-cta {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .featured-projects__bg .featured-projects__shape {
        display: none;
    }

    .featured-projects__grid {
        opacity: 1;
    }

    #featured-projects .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #featured-projects {
        padding: 32px 0 32px;
    }

    .featured-projects__title {
        font-size: 1.5rem;
    }

    .featured-projects__subtitle {
        font-size: 0.8rem;
    }

    .featured-projects__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 340px;
        margin: 0 auto 24px;
    }

    .project-card__content {
        padding: 12px 12px 14px;
    }

    .project-card__title {
        font-size: 0.85rem;
    }

    .project-card__client {
        font-size: 0.68rem;
        flex-wrap: wrap;
    }

    .project-card__description {
        font-size: 0.72rem;
    }

    .project-card__tech span {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .project-card__link {
        font-size: 0.68rem;
    }

    .overlay-btn {
        padding: 3px 8px;
        font-size: 0.5rem;
    }

    .overlay-btn--secondary {
        display: none;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #featured-projects {
        padding: 24px 0 24px;
    }

    .featured-projects__title {
        font-size: 1.3rem;
    }

    .featured-projects__subtitle {
        font-size: 0.72rem;
    }

    .project-card__content {
        padding: 10px 10px 12px;
    }

    .project-card__title {
        font-size: 0.78rem;
    }

    .project-card__client {
        font-size: 0.62rem;
    }

    .project-card__description {
        font-size: 0.65rem;
    }

    .project-card__tech span {
        font-size: 0.4rem;
        padding: 0 4px;
    }

    .project-card__link {
        font-size: 0.62rem;
    }

    .overlay-btn {
        padding: 2px 6px;
        font-size: 0.45rem;
    }

    .overlay-btn i {
        font-size: 0.4rem;
    }

    .btn-projects-cta {
        padding: 8px 16px;
        font-size: 0.72rem;
    }
}

/* ==================================================
END: Featured Projects Showcase Responsive
================================================== */

/* ==================================================
START: Interactive Portfolio Gallery Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #portfolio-gallery {
        padding: 60px 0 60px;
    }

    .portfolio-gallery__header {
        margin-bottom: 36px;
    }

    .portfolio-gallery__title {
        font-size: 2.2rem;
    }

    .portfolio-gallery__subtitle {
        font-size: 0.95rem;
    }

    .portfolio-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 32px;
    }

    .gallery-card__content {
        padding: 16px 16px 18px;
    }

    .gallery-card__title {
        font-size: 0.95rem;
    }

    .gallery-card__description {
        font-size: 0.78rem;
    }

    .gallery-card__tech span {
        font-size: 0.45rem;
        padding: 1px 8px;
    }

    .btn-load-more {
        padding: 12px 28px;
        font-size: 0.85rem;
    }

    .portfolio-gallery__orb--1,
    .portfolio-gallery__orb--2 {
        display: none;
    }

    .portfolio-gallery__shape--2 {
        display: none;
    }

    #portfolio-gallery .particle--3,
    #portfolio-gallery .particle--5,
    #portfolio-gallery .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #portfolio-gallery {
        padding: 40px 0 40px;
    }

    .portfolio-gallery__header {
        margin-bottom: 28px;
    }

    .portfolio-gallery__title {
        font-size: 1.8rem;
    }

    .portfolio-gallery__subtitle {
        font-size: 0.88rem;
    }

    .portfolio-gallery__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 24px;
    }

    .gallery-card__content {
        padding: 14px 14px 16px;
    }

    .gallery-card__title {
        font-size: 0.85rem;
    }

    .gallery-card__description {
        font-size: 0.72rem;
        margin-bottom: 8px;
    }

    .gallery-card__tech {
        gap: 3px;
        margin-bottom: 8px;
    }

    .gallery-card__tech span {
        font-size: 0.42rem;
        padding: 1px 6px;
    }

    .gallery-card__footer {
        gap: 8px;
        padding-top: 8px;
    }

    .gallery-card__year,
    .gallery-card__country {
        font-size: 0.6rem;
    }

    .gallery-card__link {
        font-size: 0.68rem;
    }

    .placeholder-content i {
        font-size: 1.8rem;
    }

    .placeholder-content span {
        font-size: 0.7rem;
    }

    .btn-load-more {
        padding: 10px 24px;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    .portfolio-gallery__bg .portfolio-gallery__shape {
        display: none;
    }

    .portfolio-gallery__grid {
        opacity: 1;
    }

    #portfolio-gallery .particle {
        display: none;
    }

    .portfolio-gallery__empty .empty-state__icon {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }

    .portfolio-gallery__empty .empty-state__title {
        font-size: 1.1rem;
    }

    .portfolio-gallery__empty .empty-state__description {
        font-size: 0.8rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #portfolio-gallery {
        padding: 32px 0 32px;
    }

    .portfolio-gallery__title {
        font-size: 1.5rem;
    }

    .portfolio-gallery__subtitle {
        font-size: 0.8rem;
    }

    .portfolio-gallery__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 340px;
        margin: 0 auto 24px;
    }

    .gallery-card__content {
        padding: 12px 12px 14px;
    }

    .gallery-card__title {
        font-size: 0.82rem;
    }

    .gallery-card__description {
        font-size: 0.68rem;
    }

    .gallery-card__tech span {
        font-size: 0.4rem;
        padding: 0 6px;
    }

    .btn-load-more {
        padding: 8px 20px;
        font-size: 0.72rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #portfolio-gallery {
        padding: 24px 0 24px;
    }

    .portfolio-gallery__title {
        font-size: 1.3rem;
    }

    .portfolio-gallery__subtitle {
        font-size: 0.72rem;
    }

    .gallery-card__content {
        padding: 10px 10px 12px;
    }

    .gallery-card__title {
        font-size: 0.75rem;
    }

    .gallery-card__description {
        font-size: 0.62rem;
    }

    .gallery-card__tech span {
        font-size: 0.38rem;
        padding: 0 4px;
    }

    .gallery-card__footer {
        gap: 4px;
    }

    .gallery-card__year,
    .gallery-card__country {
        font-size: 0.55rem;
    }

    .gallery-card__link {
        font-size: 0.6rem;
    }
}

/* ==================================================
END: Interactive Portfolio Gallery Responsive
================================================== */

/* ==================================================
START: Technologies Used Across Our Portfolio Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #portfolio-technologies {
        padding: 60px 0 60px;
    }

    .portfolio-technologies__header {
        margin-bottom: 36px;
    }

    .portfolio-technologies__title {
        font-size: 2.2rem;
    }

    .portfolio-technologies__subtitle {
        font-size: 0.95rem;
    }

    .portfolio-technologies__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin-bottom: 32px;
    }

    .tech-category {
        padding: 20px 18px 18px;
        border-radius: 16px;
    }

    .tech-category__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .tech-category__title {
        font-size: 0.92rem;
    }

    .tech-item {
        padding: 6px 10px;
    }

    .tech-item__icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.75rem;
    }

    .tech-item__name {
        font-size: 0.76rem;
    }

    .tech-item__level {
        font-size: 0.48rem;
        padding: 1px 6px;
    }

    .portfolio-technologies__highlights {
        padding: 24px 18px 22px;
        border-radius: 16px;
    }

    .highlights-grid {
        gap: 8px 16px;
    }

    .highlight-item {
        font-size: 0.76rem;
    }

    .portfolio-technologies__orb--1,
    .portfolio-technologies__orb--2 {
        display: none;
    }

    .portfolio-technologies__shape--2 {
        display: none;
    }

    #portfolio-technologies .particle--3,
    #portfolio-technologies .particle--5,
    #portfolio-technologies .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #portfolio-technologies {
        padding: 40px 0 40px;
    }

    .portfolio-technologies__header {
        margin-bottom: 28px;
    }

    .portfolio-technologies__title {
        font-size: 1.8rem;
    }

    .portfolio-technologies__subtitle {
        font-size: 0.88rem;
    }

    .portfolio-technologies__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .tech-category {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .tech-category__header {
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .tech-category__icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .tech-category__title {
        font-size: 0.82rem;
    }

    .tech-item {
        padding: 4px 8px;
        border-radius: 8px;
        gap: 8px;
    }

    .tech-item__icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.65rem;
        border-radius: 4px;
    }

    .tech-item__name {
        font-size: 0.68rem;
    }

    .tech-item__level {
        font-size: 0.42rem;
        padding: 1px 4px;
    }

    .portfolio-technologies__highlights {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .highlights-label {
        font-size: 0.6rem;
        margin-bottom: 10px;
    }

    .highlights-grid {
        gap: 6px 12px;
    }

    .highlight-item {
        font-size: 0.68rem;
    }

    .portfolio-technologies__bg .portfolio-technologies__shape {
        display: none;
    }

    .portfolio-technologies__grid {
        opacity: 1;
    }

    #portfolio-technologies .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #portfolio-technologies {
        padding: 32px 0 32px;
    }

    .portfolio-technologies__title {
        font-size: 1.5rem;
    }

    .portfolio-technologies__subtitle {
        font-size: 0.8rem;
    }

    .portfolio-technologies__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .tech-category {
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .tech-category__header {
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .tech-category__icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .tech-category__title {
        font-size: 0.75rem;
    }

    .tech-item {
        padding: 3px 6px;
        gap: 6px;
    }

    .tech-item__icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.55rem;
    }

    .tech-item__name {
        font-size: 0.62rem;
    }

    .tech-item__level {
        font-size: 0.38rem;
        padding: 0 4px;
    }

    .portfolio-technologies__highlights {
        padding: 14px 10px 12px;
        border-radius: 12px;
    }

    .highlights-grid {
        gap: 4px 10px;
    }

    .highlight-item {
        font-size: 0.6rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #portfolio-technologies {
        padding: 24px 0 24px;
    }

    .portfolio-technologies__title {
        font-size: 1.3rem;
    }

    .portfolio-technologies__subtitle {
        font-size: 0.72rem;
    }

    .tech-category {
        padding: 12px 10px 10px;
        border-radius: 10px;
    }

    .tech-category__header {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .tech-category__icon {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .tech-category__title {
        font-size: 0.68rem;
    }

    .tech-item {
        padding: 2px 4px;
    }

    .tech-item__icon {
        width: 16px;
        height: 16px;
        min-width: 16px;
        font-size: 0.45rem;
    }

    .tech-item__name {
        font-size: 0.55rem;
    }

    .tech-item__level {
        font-size: 0.35rem;
        padding: 0 2px;
    }

    .highlight-item {
        font-size: 0.55rem;
    }
}

/* ==================================================
END: Technologies Used Across Our Portfolio Responsive
================================================== */

/* ==================================================
START: Client Results & Business Impact Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #business-impact {
        padding: 60px 0 60px;
    }

    .business-impact__header {
        margin-bottom: 36px;
    }

    .business-impact__title {
        font-size: 2.2rem;
    }

    .business-impact__subtitle {
        font-size: 0.95rem;
    }

    .business-impact__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin-bottom: 32px;
    }

    .impact-card {
        padding: 24px 18px 20px;
        border-radius: 16px;
    }

    .impact-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .impact-card__title {
        font-size: 0.95rem;
    }

    .impact-card__description {
        font-size: 0.82rem;
    }

    .business-impact__metrics {
        padding: 24px 18px 22px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin: 0 auto;
    }

    .metric-item__number {
        font-size: 2rem;
    }

    .metric-suffix {
        font-size: 1.4rem;
    }

    .metric-item__label {
        font-size: 0.78rem;
    }

    .business-impact__strip {
        padding: 14px 18px;
        border-radius: 14px;
    }

    .benefits-strip__inner {
        gap: 10px 16px;
    }

    .benefit-item {
        font-size: 0.76rem;
    }

    .business-impact__orb--1,
    .business-impact__orb--2 {
        display: none;
    }

    .business-impact__shape--2 {
        display: none;
    }

    #business-impact .particle--3,
    #business-impact .particle--5,
    #business-impact .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #business-impact {
        padding: 40px 0 40px;
    }

    .business-impact__header {
        margin-bottom: 28px;
    }

    .business-impact__title {
        font-size: 1.8rem;
    }

    .business-impact__subtitle {
        font-size: 0.88rem;
    }

    .business-impact__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .impact-card {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    .impact-card__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .impact-card__title {
        font-size: 0.85rem;
    }

    .impact-card__description {
        font-size: 0.76rem;
    }

    .business-impact__metrics {
        padding: 18px 14px 16px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 380px;
    }

    .metric-item__number {
        font-size: 1.6rem;
    }

    .metric-suffix {
        font-size: 1.1rem;
    }

    .metric-item__label {
        font-size: 0.72rem;
    }

    .business-impact__strip {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .benefits-strip__inner {
        gap: 8px 12px;
    }

    .benefit-item {
        font-size: 0.7rem;
        gap: 6px;
    }

    .benefit-item__icon {
        font-size: 0.7rem;
    }

    .business-impact__bg .business-impact__shape {
        display: none;
    }

    .business-impact__grid {
        opacity: 1;
    }

    #business-impact .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #business-impact {
        padding: 32px 0 32px;
    }

    .business-impact__title {
        font-size: 1.5rem;
    }

    .business-impact__subtitle {
        font-size: 0.8rem;
    }

    .business-impact__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .impact-card {
        padding: 16px 14px 14px;
        border-radius: 12px;
    }

    .impact-card__icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .impact-card__title {
        font-size: 0.8rem;
    }

    .impact-card__description {
        font-size: 0.72rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
    }

    .metric-item__number {
        font-size: 1.3rem;
    }

    .metric-suffix {
        font-size: 0.9rem;
    }

    .metric-item__label {
        font-size: 0.65rem;
    }

    .business-impact__strip {
        padding: 10px 10px;
        border-radius: 10px;
    }

    .benefits-strip__inner {
        gap: 6px 10px;
    }

    .benefit-item {
        font-size: 0.62rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #business-impact {
        padding: 24px 0 24px;
    }

    .business-impact__title {
        font-size: 1.3rem;
    }

    .business-impact__subtitle {
        font-size: 0.72rem;
    }

    .impact-card {
        padding: 14px 12px 12px;
        border-radius: 10px;
    }

    .impact-card__icon {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
        border-radius: 8px;
        margin-bottom: 6px;
    }

    .impact-card__title {
        font-size: 0.72rem;
    }

    .impact-card__description {
        font-size: 0.65rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 280px;
    }

    .metric-item__number {
        font-size: 1.1rem;
    }

    .metric-suffix {
        font-size: 0.75rem;
    }

    .metric-item__label {
        font-size: 0.58rem;
    }

    .benefit-item {
        font-size: 0.55rem;
    }
}

/* ==================================================
END: Client Results & Business Impact Responsive
================================================== */

/* ==================================================
START: Portfolio FAQ Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #portfolio-faq {
        padding: 60px 0 60px;
    }

    .portfolio-faq__header {
        margin-bottom: 36px;
    }

    .portfolio-faq__title {
        font-size: 2.2rem;
    }

    .portfolio-faq__subtitle {
        font-size: 0.95rem;
    }

    .portfolio-faq__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .portfolio-faq__intro {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        align-items: stretch;
    }

    .faq-intro__card {
        flex: 2;
        min-width: 280px;
        padding: 24px 20px 22px;
    }

    .faq-intro__visual {
        flex: 1;
        min-width: 160px;
        height: auto;
        min-height: 140px;
    }

    .faq-intro__buttons {
        flex-direction: row;
    }

    .btn-faq-contact,
    .btn-faq-schedule {
        width: auto;
        flex: 1;
    }

    .portfolio-faq__accordion {
        gap: 8px;
    }

    .faq-item__trigger {
        padding: 14px 16px 14px 14px;
        font-size: 0.85rem;
        gap: 12px;
    }

    .faq-item__icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.7rem;
    }

    .faq-item__indicator {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.65rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 16px 16px 16px;
    }

    .faq-item__answer-content {
        font-size: 0.8rem;
    }

    .faq-visual__node {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .faq-visual__orb--1 {
        width: 50px;
        height: 50px;
    }
    .faq-visual__orb--2 {
        width: 35px;
        height: 35px;
    }
    .faq-visual__orb--3 {
        width: 25px;
        height: 25px;
    }

    .portfolio-faq__orb--1,
    .portfolio-faq__orb--2 {
        display: none;
    }

    .portfolio-faq__shape--2 {
        display: none;
    }

    #portfolio-faq .particle--3,
    #portfolio-faq .particle--5,
    #portfolio-faq .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #portfolio-faq {
        padding: 40px 0 40px;
    }

    .portfolio-faq__header {
        margin-bottom: 28px;
    }

    .portfolio-faq__title {
        font-size: 1.8rem;
    }

    .portfolio-faq__subtitle {
        font-size: 0.88rem;
    }

    .portfolio-faq__grid {
        gap: 24px;
    }

    .portfolio-faq__intro {
        flex-direction: column;
        gap: 12px;
    }

    .faq-intro__card {
        min-width: auto;
        padding: 20px 16px 18px;
        border-radius: 16px;
    }

    .faq-intro__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .faq-intro__title {
        font-size: 1.05rem;
    }

    .faq-intro__description {
        font-size: 0.82rem;
    }

    .faq-intro__buttons {
        flex-direction: column;
        gap: 8px;
    }

    .btn-faq-contact,
    .btn-faq-schedule {
        width: 100%;
        padding: 10px 20px;
        font-size: 0.8rem;
    }

    .faq-intro__visual {
        min-height: 100px;
        border-radius: 14px;
    }

    .faq-visual__node {
        width: 24px;
        height: 24px;
        font-size: 0.55rem;
    }

    .faq-visual__node--1 {
        top: 12%;
        right: 15%;
    }
    .faq-visual__node--2 {
        bottom: 12%;
        left: 18%;
    }

    .faq-visual__orb--1 {
        width: 40px;
        height: 40px;
    }
    .faq-visual__orb--2 {
        width: 30px;
        height: 30px;
    }
    .faq-visual__orb--3 {
        width: 20px;
        height: 20px;
    }

    .portfolio-faq__accordion {
        gap: 6px;
    }

    .faq-item {
        border-radius: 12px;
    }

    .faq-item__trigger {
        padding: 12px 14px 12px 12px;
        font-size: 0.8rem;
        gap: 10px;
    }

    .faq-item__icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.6rem;
        border-radius: 6px;
    }

    .faq-item__question {
        font-size: 0.78rem;
    }

    .faq-item__indicator {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.55rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 14px 14px 14px;
        max-height: 400px;
    }

    .faq-item__answer-content {
        font-size: 0.75rem;
        padding-top: 4px;
    }

    .portfolio-faq__bg .portfolio-faq__shape {
        display: none;
    }

    .portfolio-faq__grid {
        opacity: 1;
    }

    #portfolio-faq .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #portfolio-faq {
        padding: 32px 0 32px;
    }

    .portfolio-faq__title {
        font-size: 1.5rem;
    }

    .portfolio-faq__subtitle {
        font-size: 0.8rem;
    }

    .faq-intro__card {
        padding: 16px 12px 14px;
        border-radius: 14px;
    }

    .faq-intro__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .faq-intro__title {
        font-size: 0.95rem;
    }

    .faq-intro__description {
        font-size: 0.75rem;
    }

    .faq-intro__visual {
        min-height: 80px;
        border-radius: 12px;
    }

    .faq-visual__node {
        width: 20px;
        height: 20px;
        font-size: 0.5rem;
    }

    .faq-item__trigger {
        padding: 10px 12px 10px 10px;
        font-size: 0.75rem;
        gap: 8px;
    }

    .faq-item__icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.5rem;
    }

    .faq-item__question {
        font-size: 0.72rem;
    }

    .faq-item__indicator {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.5rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 12px 12px 12px;
    }

    .faq-item__answer-content {
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #portfolio-faq {
        padding: 24px 0 24px;
    }

    .portfolio-faq__title {
        font-size: 1.3rem;
    }

    .portfolio-faq__subtitle {
        font-size: 0.72rem;
    }

    .faq-intro__card {
        padding: 14px 10px 12px;
        border-radius: 12px;
    }

    .faq-intro__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .faq-intro__title {
        font-size: 0.85rem;
    }

    .faq-intro__description {
        font-size: 0.68rem;
    }

    .faq-intro__visual {
        min-height: 70px;
    }

    .faq-visual__node {
        width: 18px;
        height: 18px;
        font-size: 0.45rem;
    }

    .faq-item__trigger {
        padding: 8px 10px 8px 8px;
        font-size: 0.68rem;
        gap: 6px;
    }

    .faq-item__icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 0.45rem;
    }

    .faq-item__question {
        font-size: 0.65rem;
    }

    .faq-item__indicator {
        width: 16px;
        height: 16px;
        min-width: 16px;
        font-size: 0.45rem;
    }

    .faq-item.active .faq-item__answer {
        padding: 0 10px 10px 10px;
    }

    .faq-item__answer-content {
        font-size: 0.62rem;
    }
}

/* ==================================================
END: Portfolio FAQ Responsive
================================================== */

/* ==================================================
START: Blog Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #blog-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 30px) 0 50px;
        min-height: auto;
    }

    .blog-hero__inner {
        flex-direction: column;
        gap: 40px;
    }

    .blog-hero__content {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .blog-hero__badge {
        align-self: center;
    }

    .blog-hero__title {
        font-size: 2.8rem;
        text-align: center;
    }

    .blog-hero__title .highlight-lime::after {
        bottom: 0;
        height: 8px;
    }

    .blog-hero__description {
        max-width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .blog-hero__buttons {
        justify-content: center;
    }

    .blog-hero__search {
        width: 100%;
        max-width: 560px;
    }

    .blog-hero__categories {
        justify-content: center;
    }

    .blog-hero__stats {
        justify-content: center;
    }

    .blog-hero__tags {
        justify-content: center;
    }

    .blog-hero__visual {
        flex: none;
        width: 100%;
        min-height: 420px;
    }

    .blog-visual__dashboard {
        max-width: 360px;
    }

    .blog-visual__resource--1 {
        top: 0%;
        right: 0%;
    }
    .blog-visual__resource--2 {
        bottom: 15%;
        left: -2%;
    }
    .blog-visual__resource--3 {
        bottom: 0%;
        right: 4%;
    }
    .blog-visual__resource--4 {
        top: 18%;
        left: -2%;
    }

    .blog-visual__tech {
        display: none;
    }

    .blog-hero__orb--1,
    .blog-hero__orb--3 {
        display: none;
    }

    .blog-hero__shape--3 {
        display: none;
    }

    #blog-hero .particle--3,
    #blog-hero .particle--5,
    #blog-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #blog-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 24px) 0 40px;
    }

    .blog-hero__inner {
        gap: 32px;
    }

    .blog-hero__title {
        font-size: 2.2rem;
    }

    .blog-hero__title .highlight-lime::after {
        height: 6px;
    }

    .blog-hero__description {
        font-size: 0.88rem;
    }

    .btn-blog-primary,
    .btn-blog-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .blog-hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .blog-hero__search {
        max-width: 100%;
    }

    .search-container {
        padding: 2px 2px 2px 14px;
        border-radius: 40px;
        flex-wrap: wrap;
    }

    .search-input {
        font-size: 0.8rem;
        padding: 10px 10px;
        width: 100%;
        min-width: 100%;
    }

    .search-btn {
        padding: 8px 16px;
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
        border-radius: 40px;
        margin-top: 2px;
    }

    .search-btn i {
        font-size: 0.7rem;
    }

    .blog-hero__categories {
        gap: 6px 8px;
    }

    .category-chip {
        font-size: 0.6rem;
        padding: 3px 12px;
    }

    .blog-hero__stats {
        gap: 10px 16px;
    }

    .stat-item .stat-number {
        font-size: 1.1rem;
    }

    .stat-item .stat-suffix {
        font-size: 0.9rem;
    }

    .stat-item .stat-label {
        font-size: 0.7rem;
    }

    .stat-divider {
        height: 18px;
    }

    .blog-hero__tags {
        gap: 4px 10px;
    }

    .tag-item {
        font-size: 0.6rem;
    }

    .blog-hero__visual {
        min-height: 340px;
    }

    .blog-visual__dashboard {
        max-width: 300px;
        padding: 18px 16px 16px;
        border-radius: 18px;
    }

    .dashboard__article {
        padding: 6px 10px;
        border-radius: 8px;
        gap: 10px;
    }

    .article-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.7rem;
    }

    .article-title {
        font-size: 0.7rem;
    }

    .article-meta {
        font-size: 0.55rem;
    }

    .blog-visual__resource {
        padding: 6px 12px;
        border-radius: 10px;
        max-width: 120px;
    }

    .blog-visual__resource .resource-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.6rem;
    }

    .blog-visual__resource .resource-label {
        font-size: 0.4rem;
    }

    .blog-visual__resource .resource-value {
        font-size: 0.6rem;
    }

    .blog-visual__resource--2,
    .blog-visual__resource--4 {
        display: none;
    }

    .blog-visual__resource--1 {
        top: 0%;
        right: 0%;
    }
    .blog-visual__resource--3 {
        bottom: 0%;
        right: 2%;
    }

    .blog-visual__orb {
        width: 80px;
        height: 80px;
    }

    .blog-hero__bg .blog-hero__shape {
        display: none;
    }

    .blog-hero__grid {
        opacity: 0.1;
    }

    #blog-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #blog-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 20px) 0 32px;
    }

    .blog-hero__title {
        font-size: 1.8rem;
    }

    .blog-hero__title .highlight-lime::after {
        height: 5px;
    }

    .blog-hero__description {
        font-size: 0.8rem;
    }

    .btn-blog-primary,
    .btn-blog-secondary {
        font-size: 0.78rem;
        padding: 10px 20px;
    }

    .search-input {
        font-size: 0.72rem;
        padding: 8px 8px;
    }

    .search-btn {
        padding: 6px 14px;
        font-size: 0.68rem;
    }

    .category-chip {
        font-size: 0.55rem;
        padding: 2px 10px;
    }

    .stat-item .stat-number {
        font-size: 0.95rem;
    }

    .stat-item .stat-suffix {
        font-size: 0.8rem;
    }

    .stat-item .stat-label {
        font-size: 0.62rem;
    }

    .blog-hero__visual {
        min-height: 280px;
    }

    .blog-visual__dashboard {
        max-width: 260px;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .dashboard__article {
        padding: 4px 8px;
        gap: 8px;
    }

    .article-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.6rem;
    }

    .article-title {
        font-size: 0.62rem;
    }

    .article-meta {
        font-size: 0.5rem;
    }

    .blog-visual__resource--1,
    .blog-visual__resource--3 {
        display: none;
    }

    .blog-visual__orb {
        width: 60px;
        height: 60px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #blog-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 16px) 0 24px;
    }

    .blog-hero__title {
        font-size: 1.5rem;
    }

    .blog-hero__title .highlight-lime::after {
        height: 4px;
    }

    .blog-hero__description {
        font-size: 0.72rem;
    }

    .blog-visual__dashboard {
        max-width: 220px;
        padding: 12px 10px 10px;
        border-radius: 12px;
    }

    .dashboard__header {
        margin-bottom: 10px;
    }

    .dashboard__dots .dot {
        width: 6px;
        height: 6px;
    }

    .dashboard__title {
        font-size: 0.55rem;
    }

    .dashboard__body {
        gap: 6px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .dashboard__article {
        padding: 3px 6px;
        gap: 6px;
    }

    .article-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.5rem;
    }

    .article-title {
        font-size: 0.55rem;
    }

    .article-meta {
        font-size: 0.45rem;
    }

    .dashboard__footer {
        padding-top: 8px;
    }

    .dash-articles {
        font-size: 0.55rem;
    }

    .dash-status {
        font-size: 0.5rem;
    }

    .blog-visual__orb {
        width: 50px;
        height: 50px;
    }
}

/* ==================================================
END: Blog Hero Banner Responsive
================================================== */

/* ==================================================
START: Featured Article Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #featured-article {
        padding: 60px 0 60px;
    }

    .featured-article__header {
        margin-bottom: 36px;
    }

    .featured-article__title {
        font-size: 2.2rem;
    }

    .featured-article__subtitle {
        font-size: 0.95rem;
    }

    .featured-article__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .article-card__content {
        padding: 20px 22px 22px;
    }

    .article-card__title {
        font-size: 1.2rem;
    }

    .article-card__summary {
        font-size: 0.88rem;
    }

    .featured-article__side {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .mini-article__image {
        aspect-ratio: 16/9;
    }

    .mini-article__placeholder {
        font-size: 1.4rem;
    }

    .mini-article__content {
        padding: 12px 14px 14px;
    }

    .mini-article__title {
        font-size: 0.82rem;
    }

    .mini-article__meta {
        gap: 8px;
        flex-wrap: wrap;
    }

    .mini-article__reading-time,
    .mini-article__date {
        font-size: 0.55rem;
    }

    .mini-article__link {
        font-size: 0.7rem;
    }

    .featured-article__orb--1,
    .featured-article__orb--2 {
        display: none;
    }

    .featured-article__shape--2 {
        display: none;
    }

    #featured-article .particle--3,
    #featured-article .particle--5,
    #featured-article .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #featured-article {
        padding: 40px 0 40px;
    }

    .featured-article__header {
        margin-bottom: 28px;
    }

    .featured-article__title {
        font-size: 1.8rem;
    }

    .featured-article__subtitle {
        font-size: 0.88rem;
    }

    .featured-article__grid {
        gap: 20px;
    }

    .article-card__content {
        padding: 16px 16px 18px;
    }

    .article-card__meta {
        gap: 8px 12px;
    }

    .article-card__category {
        font-size: 0.55rem;
        padding: 2px 10px;
    }

    .article-card__reading-time,
    .article-card__date {
        font-size: 0.6rem;
    }

    .article-card__title {
        font-size: 1.05rem;
    }

    .article-card__summary {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

    .article-card__author {
        margin-bottom: 10px;
    }

    .article-card__avatar {
        width: 34px;
        height: 34px;
    }

    .avatar-initials {
        font-size: 0.65rem;
    }

    .author-name {
        font-size: 0.78rem;
    }

    .author-title {
        font-size: 0.62rem;
    }

    .article-card__stats {
        gap: 12px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .article-card__stats .stat-item {
        font-size: 0.65rem;
    }

    .article-card__tags {
        gap: 4px;
        margin-bottom: 14px;
    }

    .article-card__tags .tag {
        font-size: 0.5rem;
        padding: 2px 10px;
    }

    .article-card__actions {
        gap: 8px;
    }

    .btn-article-primary {
        padding: 10px 20px;
        font-size: 0.78rem;
        width: 100%;
        justify-content: center;
    }

    .btn-bookmark {
        padding: 8px 14px;
        font-size: 0.72rem;
    }

    .btn-share {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    .featured-article__side {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .mini-article__image {
        aspect-ratio: 16/10;
    }

    .mini-article__placeholder {
        font-size: 1.2rem;
    }

    .mini-article__content {
        padding: 10px 12px 12px;
    }

    .mini-article__title {
        font-size: 0.75rem;
    }

    .mini-article__meta {
        gap: 6px;
        margin-bottom: 6px;
    }

    .mini-article__reading-time,
    .mini-article__date {
        font-size: 0.5rem;
    }

    .mini-article__link {
        font-size: 0.65rem;
    }

    .featured-article__bg .featured-article__shape {
        display: none;
    }

    .featured-article__grid {
        opacity: 1;
    }

    #featured-article .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #featured-article {
        padding: 32px 0 32px;
    }

    .featured-article__title {
        font-size: 1.5rem;
    }

    .featured-article__subtitle {
        font-size: 0.8rem;
    }

    .article-card__content {
        padding: 14px 14px 16px;
    }

    .article-card__title {
        font-size: 0.95rem;
    }

    .article-card__summary {
        font-size: 0.75rem;
    }

    .btn-article-primary {
        padding: 8px 16px;
        font-size: 0.72rem;
    }

    .btn-bookmark {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .btn-share {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }

    .featured-article__side {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mini-article__content {
        padding: 8px 10px 10px;
    }

    .mini-article__title {
        font-size: 0.7rem;
    }

    .mini-article__link {
        font-size: 0.6rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #featured-article {
        padding: 24px 0 24px;
    }

    .featured-article__title {
        font-size: 1.3rem;
    }

    .featured-article__subtitle {
        font-size: 0.72rem;
    }

    .article-card__content {
        padding: 10px 10px 12px;
    }

    .article-card__title {
        font-size: 0.85rem;
    }

    .article-card__summary {
        font-size: 0.68rem;
    }

    .btn-article-primary {
        font-size: 0.65rem;
        padding: 6px 12px;
    }

    .featured-article__side {
        gap: 10px;
    }

    .mini-article__title {
        font-size: 0.62rem;
    }
}

/* ==================================================
END: Featured Article Responsive
================================================== */

/* ==================================================
START: Blog Categories Hub Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #blog-categories {
        padding: 60px 0 60px;
    }

    .blog-categories__header {
        margin-bottom: 36px;
    }

    .blog-categories__title {
        font-size: 2.2rem;
    }

    .blog-categories__subtitle {
        font-size: 0.95rem;
    }

    .featured-category {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 24px 28px;
        border-radius: 20px;
    }

    .featured-category__icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }

    .featured-category__title {
        font-size: 1.2rem;
    }

    .featured-category__description {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .featured-category__meta {
        gap: 12px;
    }

    .featured-category__count,
    .featured-category__update {
        font-size: 0.72rem;
    }

    .btn-featured-category {
        padding: 8px 22px;
        font-size: 0.8rem;
    }

    .featured-category__visual {
        width: 80px;
        height: 80px;
        align-self: center;
    }

    .featured-visual__orb--1 {
        width: 60px;
        height: 60px;
    }

    .featured-visual__orb--2 {
        width: 40px;
        height: 40px;
    }

    .featured-visual__node {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .blog-categories__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin-bottom: 32px;
    }

    .category-card {
        padding: 20px 18px 18px;
        border-radius: 16px;
    }

    .category-card__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .category-card__title {
        font-size: 0.92rem;
    }

    .category-card__description {
        font-size: 0.78rem;
    }

    .category-card__meta {
        padding-top: 10px;
        margin-bottom: 10px;
    }

    .category-card__count {
        font-size: 0.65rem;
    }

    .category-card__latest {
        font-size: 0.6rem;
    }

    .category-card__link {
        font-size: 0.75rem;
    }

    .btn-view-all-categories {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .blog-categories__orb--1,
    .blog-categories__orb--2 {
        display: none;
    }

    .blog-categories__shape--2 {
        display: none;
    }

    #blog-categories .particle--3,
    #blog-categories .particle--5,
    #blog-categories .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #blog-categories {
        padding: 40px 0 40px;
    }

    .blog-categories__header {
        margin-bottom: 28px;
    }

    .blog-categories__title {
        font-size: 1.8rem;
    }

    .blog-categories__subtitle {
        font-size: 0.88rem;
    }

    .blog-categories__featured {
        margin-bottom: 28px;
    }

    .featured-category {
        padding: 20px 18px 22px;
        border-radius: 16px;
        gap: 16px;
    }

    .featured-category__icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        border-radius: 16px;
    }

    .featured-category__title {
        font-size: 1.05rem;
    }

    .featured-category__description {
        font-size: 0.8rem;
    }

    .featured-category__meta {
        gap: 8px;
        flex-wrap: wrap;
    }

    .featured-category__count,
    .featured-category__update {
        font-size: 0.65rem;
    }

    .btn-featured-category {
        padding: 8px 18px;
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .featured-category__visual {
        width: 60px;
        height: 60px;
    }

    .featured-visual__orb--1 {
        width: 45px;
        height: 45px;
    }

    .featured-visual__orb--2 {
        width: 30px;
        height: 30px;
    }

    .featured-visual__node {
        width: 22px;
        height: 22px;
        font-size: 0.5rem;
    }

    .blog-categories__filters {
        margin-bottom: 24px;
    }

    .filter-bar {
        gap: 6px 10px;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-pill {
        padding: 4px 14px;
        font-size: 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .blog-categories__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .category-card {
        padding: 16px 14px 16px;
        border-radius: 14px;
    }

    .category-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .category-card__title {
        font-size: 0.82rem;
    }

    .category-card__description {
        font-size: 0.7rem;
        margin-bottom: 10px;
    }

    .category-card__meta {
        padding-top: 8px;
        margin-bottom: 8px;
    }

    .category-card__count {
        font-size: 0.58rem;
    }

    .category-card__latest {
        font-size: 0.55rem;
    }

    .category-card__link {
        font-size: 0.7rem;
    }

    .btn-view-all-categories {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .blog-categories__bg .blog-categories__shape {
        display: none;
    }

    .blog-categories__grid {
        opacity: 1;
    }

    #blog-categories .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #blog-categories {
        padding: 32px 0 32px;
    }

    .blog-categories__title {
        font-size: 1.5rem;
    }

    .blog-categories__subtitle {
        font-size: 0.8rem;
    }

    .blog-categories__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .category-card {
        padding: 14px 12px 14px;
        border-radius: 12px;
    }

    .category-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .category-card__title {
        font-size: 0.78rem;
    }

    .category-card__description {
        font-size: 0.65rem;
    }

    .btn-view-all-categories {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #blog-categories {
        padding: 24px 0 24px;
    }

    .blog-categories__title {
        font-size: 1.3rem;
    }

    .blog-categories__subtitle {
        font-size: 0.72rem;
    }

    .category-card {
        padding: 12px 10px 12px;
        border-radius: 10px;
    }

    .category-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .category-card__title {
        font-size: 0.7rem;
    }

    .category-card__description {
        font-size: 0.6rem;
    }

    .category-card__link {
        font-size: 0.62rem;
    }
}

/* ==================================================
END: Blog Categories Hub Responsive
================================================== */

/* ==================================================
START: Advanced Search & Smart Filters Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #blog-search {
        padding: 60px 0 60px;
    }

    .blog-search__header {
        margin-bottom: 32px;
    }

    .blog-search__title {
        font-size: 2.2rem;
    }

    .blog-search__subtitle {
        font-size: 0.95rem;
    }

    .search-bar-container {
        padding: 4px 4px 4px 16px;
        border-radius: 40px;
    }

    .search-bar-input {
        font-size: 0.92rem;
        padding: 12px 6px;
    }

    .search-bar-submit {
        padding: 10px 22px;
        font-size: 0.8rem;
    }

    .search-bar-voice {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .blog-search__suggestions {
        gap: 6px 10px;
        margin-bottom: 24px;
    }

    .suggestion-chip {
        font-size: 0.65rem;
        padding: 3px 12px;
    }

    .filter-panel__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }

    .filter-group--actions {
        grid-column: span 2;
        flex-direction: row;
        justify-content: flex-end;
    }

    .filter-panel {
        padding: 20px 20px 16px;
        border-radius: 16px;
    }

    .blog-search__summary {
        padding: 10px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .blog-search__results {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .result-card {
        padding: 16px 18px 18px;
        border-radius: 14px;
    }

    .result-card__title {
        font-size: 0.92rem;
    }

    .result-card__excerpt {
        font-size: 0.78rem;
    }

    .filter-toggle {
        display: flex;
    }

    .blog-search__orb--1,
    .blog-search__orb--2 {
        display: none;
    }

    .blog-search__shape--2 {
        display: none;
    }

    #blog-search .particle--3,
    #blog-search .particle--5,
    #blog-search .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #blog-search {
        padding: 40px 0 40px;
    }

    .blog-search__header {
        margin-bottom: 24px;
    }

    .blog-search__title {
        font-size: 1.8rem;
    }

    .blog-search__subtitle {
        font-size: 0.88rem;
    }

    .search-bar-container {
        padding: 4px 4px 4px 14px;
        border-radius: 40px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .search-bar-input {
        font-size: 0.82rem;
        padding: 10px 4px;
        width: 100%;
        min-width: 100%;
        order: 2;
    }

    .search-bar-icon {
        font-size: 0.8rem;
        order: 1;
    }

    .search-bar-clear {
        order: 3;
        font-size: 0.95rem;
    }

    .search-bar-loading {
        order: 4;
    }

    .search-bar-voice {
        order: 5;
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .search-bar-submit {
        order: 6;
        padding: 8px 16px;
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
        border-radius: 40px;
    }

    .blog-search__suggestions {
        gap: 4px 8px;
        margin-bottom: 20px;
    }

    .suggestions-label {
        font-size: 0.65rem;
        width: 100%;
    }

    .suggestion-chip {
        font-size: 0.58rem;
        padding: 2px 10px;
    }

    .filter-toggle {
        padding: 8px 16px;
        font-size: 0.78rem;
        border-radius: 40px;
    }

    .filter-panel {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .filter-panel__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .filter-group--actions {
        grid-column: span 1;
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group__label {
        font-size: 0.65rem;
    }

    .filter-select {
        font-size: 0.78rem;
        padding: 8px 10px;
    }

    .btn-filter-apply {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 0.78rem;
    }

    .btn-filter-reset {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 0.78rem;
    }

    .filter-chips {
        padding: 6px 10px;
        gap: 6px 10px;
        border-radius: 10px;
    }

    .chips-label {
        font-size: 0.6rem;
    }

    .filter-chip {
        font-size: 0.62rem;
        padding: 2px 8px 2px 10px;
    }

    .chips-clear-all {
        font-size: 0.58rem;
        padding: 2px 10px;
    }

    .blog-search__summary {
        padding: 8px 12px;
        border-radius: 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .summary-count {
        font-size: 0.95rem;
    }

    .summary-text {
        font-size: 0.78rem;
    }

    .summary-query {
        font-size: 0.78rem;
    }

    .summary-right {
        font-size: 0.72rem;
    }

    .blog-search__results {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .result-card {
        padding: 14px 14px 16px;
        border-radius: 12px;
    }

    .result-card__title {
        font-size: 0.88rem;
    }

    .result-card__excerpt {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .result-card__meta {
        font-size: 0.62rem;
        gap: 8px 12px;
    }

    .result-tag {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .btn-load-more-results {
        padding: 10px 24px;
        font-size: 0.78rem;
        width: 100%;
        justify-content: center;
    }

    .blog-search__empty {
        padding: 40px 16px;
    }

    .empty-state__icon {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }

    .empty-state__title {
        font-size: 1.1rem;
    }

    .empty-state__description {
        font-size: 0.8rem;
    }

    .blog-search__bg .blog-search__shape {
        display: none;
    }

    .blog-search__grid {
        opacity: 0.1;
    }

    #blog-search .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #blog-search {
        padding: 32px 0 32px;
    }

    .blog-search__title {
        font-size: 1.5rem;
    }

    .blog-search__subtitle {
        font-size: 0.8rem;
    }

    .search-bar-input {
        font-size: 0.75rem;
        padding: 8px 4px;
    }

    .search-bar-submit {
        font-size: 0.7rem;
        padding: 6px 14px;
    }

    .blog-search__suggestions {
        gap: 4px 6px;
    }

    .suggestion-chip {
        font-size: 0.52rem;
        padding: 2px 8px;
    }

    .filter-panel {
        padding: 12px 10px 10px;
        border-radius: 12px;
    }

    .filter-select {
        font-size: 0.72rem;
        padding: 6px 8px;
    }

    .btn-filter-apply,
    .btn-filter-reset {
        font-size: 0.72rem;
        padding: 8px 14px;
    }

    .result-card {
        padding: 12px 12px 14px;
        border-radius: 10px;
    }

    .result-card__title {
        font-size: 0.82rem;
    }

    .result-card__excerpt {
        font-size: 0.7rem;
    }

    .result-card__meta {
        font-size: 0.58rem;
        gap: 6px 10px;
    }

    .btn-load-more-results {
        font-size: 0.72rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #blog-search {
        padding: 24px 0 24px;
    }

    .blog-search__title {
        font-size: 1.3rem;
    }

    .blog-search__subtitle {
        font-size: 0.72rem;
    }

    .search-bar-input {
        font-size: 0.68rem;
    }

    .search-bar-submit {
        font-size: 0.65rem;
        padding: 6px 12px;
    }

    .result-card__title {
        font-size: 0.75rem;
    }

    .result-card__excerpt {
        font-size: 0.65rem;
    }
}

/* ==================================================
END: Advanced Search & Smart Filters Responsive
================================================== */

/* ==================================================
START: Latest Articles Grid Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #blog-feed {
        padding: 60px 0 60px;
    }

    .blog-feed__header {
        margin-bottom: 36px;
    }

    .blog-feed__title {
        font-size: 2.2rem;
    }

    .blog-feed__subtitle {
        font-size: 0.95rem;
    }

    .blog-feed__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 32px;
    }

    .feed-card__content {
        padding: 18px 18px 20px;
    }

    .feed-card__title {
        font-size: 1rem;
    }

    .feed-card__excerpt {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .feed-card__stats .stat {
        font-size: 0.65rem;
    }

    .feed-card__info {
        font-size: 0.65rem;
        gap: 8px;
    }

    .feed-card__link {
        font-size: 0.72rem;
    }

    .btn-load-more-feed {
        padding: 12px 28px;
        font-size: 0.85rem;
    }

    .pagination {
        gap: 4px;
    }

    .page-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .blog-feed__orb--1,
    .blog-feed__orb--2 {
        display: none;
    }

    .blog-feed__shape--2 {
        display: none;
    }

    #blog-feed .particle--3,
    #blog-feed .particle--5,
    #blog-feed .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #blog-feed {
        padding: 40px 0 40px;
    }

    .blog-feed__header {
        margin-bottom: 28px;
    }

    .blog-feed__title {
        font-size: 1.8rem;
    }

    .blog-feed__subtitle {
        font-size: 0.88rem;
    }

    .blog-feed__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .feed-card__content {
        padding: 14px 14px 16px;
    }

    .feed-card__meta {
        gap: 4px 8px;
        margin-bottom: 8px;
    }

    .feed-card__category {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .feed-card__tech {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .feed-card__difficulty {
        font-size: 0.45rem;
        padding: 1px 8px;
    }

    .feed-card__title {
        font-size: 0.9rem;
    }

    .feed-card__excerpt {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 8px;
    }

    .feed-card__tags {
        gap: 3px;
        margin-bottom: 10px;
    }

    .feed-card__tags span {
        font-size: 0.45rem;
        padding: 1px 8px;
    }

    .feed-card__footer {
        padding-top: 10px;
        margin-bottom: 10px;
    }

    .feed-card__avatar {
        width: 24px;
        height: 24px;
    }

    .feed-card__avatar span {
        font-size: 0.5rem;
    }

    .feed-card__author-name {
        font-size: 0.68rem;
    }

    .feed-card__stats {
        gap: 8px;
    }

    .feed-card__stats .stat {
        font-size: 0.58rem;
    }

    .feed-card__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .feed-card__info {
        font-size: 0.6rem;
        gap: 8px;
    }

    .feed-card__link {
        font-size: 0.7rem;
    }

    .feed-card__featured-badge {
        top: 10px;
        left: 10px;
        font-size: 0.45rem;
        padding: 2px 10px;
    }

    .feed-card__overlay {
        gap: 10px;
    }

    .overlay-bookmark,
    .overlay-share {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    .placeholder-content i {
        font-size: 1.8rem;
    }

    .placeholder-content span {
        font-size: 0.7rem;
    }

    .btn-load-more-feed {
        padding: 10px 24px;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    .pagination {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-btn {
        padding: 4px 10px;
        font-size: 0.68rem;
        border-radius: 8px;
    }

    .page-btn--prev,
    .page-btn--next {
        padding: 4px 12px;
        font-size: 0.68rem;
    }

    .page-ellipsis {
        padding: 4px 2px;
        font-size: 0.68rem;
    }

    .blog-feed__bg .blog-feed__shape {
        display: none;
    }

    .blog-feed__grid {
        opacity: 1;
    }

    #blog-feed .particle {
        display: none;
    }

    .blog-feed__empty .empty-state__icon {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }

    .blog-feed__empty .empty-state__title {
        font-size: 1.1rem;
    }

    .blog-feed__empty .empty-state__description {
        font-size: 0.8rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #blog-feed {
        padding: 32px 0 32px;
    }

    .blog-feed__title {
        font-size: 1.5rem;
    }

    .blog-feed__subtitle {
        font-size: 0.8rem;
    }

    .blog-feed__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 340px;
        margin: 0 auto 24px;
    }

    .feed-card__content {
        padding: 12px 12px 14px;
    }

    .feed-card__title {
        font-size: 0.85rem;
    }

    .feed-card__excerpt {
        font-size: 0.72rem;
    }

    .feed-card__tags span {
        font-size: 0.42rem;
        padding: 1px 6px;
    }

    .feed-card__stats .stat {
        font-size: 0.52rem;
    }

    .feed-card__info {
        font-size: 0.55rem;
    }

    .feed-card__link {
        font-size: 0.65rem;
    }

    .btn-load-more-feed {
        font-size: 0.72rem;
        padding: 8px 20px;
    }

    .page-btn {
        padding: 3px 8px;
        font-size: 0.6rem;
    }

    .page-btn--prev,
    .page-btn--next {
        padding: 3px 10px;
        font-size: 0.6rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #blog-feed {
        padding: 24px 0 24px;
    }

    .blog-feed__title {
        font-size: 1.3rem;
    }

    .blog-feed__subtitle {
        font-size: 0.72rem;
    }

    .feed-card__content {
        padding: 10px 10px 12px;
    }

    .feed-card__title {
        font-size: 0.78rem;
    }

    .feed-card__excerpt {
        font-size: 0.65rem;
    }

    .feed-card__tags span {
        font-size: 0.4rem;
        padding: 0 4px;
    }

    .btn-load-more-feed {
        font-size: 0.65rem;
        padding: 6px 16px;
    }

    .page-btn {
        padding: 2px 6px;
        font-size: 0.55rem;
    }
}

/* ==================================================
END: Latest Articles Grid Responsive
================================================== */

/* ==================================================
START: Featured Learning Collections Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #learning-collections {
        padding: 60px 0 60px;
    }

    .learning-collections__header {
        margin-bottom: 36px;
    }

    .learning-collections__title {
        font-size: 2.2rem;
    }

    .learning-collections__subtitle {
        font-size: 0.95rem;
    }

    .featured-path {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 20px;
    }

    .featured-path__image {
        min-height: 220px;
    }

    .featured-path__content {
        padding: 24px 24px 28px;
    }

    .featured-path__title {
        font-size: 1.3rem;
    }

    .featured-path__description {
        font-size: 0.88rem;
    }

    .featured-path__objectives {
        grid-template-columns: 1fr 1fr;
        font-size: 0.78rem;
    }

    .featured-path__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-path-start {
        width: 100%;
        justify-content: center;
    }

    .learning-collections__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin-bottom: 32px;
    }

    .collection-card__content {
        padding: 14px 16px 16px;
    }

    .collection-card__title {
        font-size: 0.88rem;
    }

    .collection-card__description {
        font-size: 0.72rem;
    }

    .learning-collections__highlights {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin: 0 auto;
    }

    .highlight-stat__number {
        font-size: 1.8rem;
    }

    .highlight-stat__number .stat-suffix {
        font-size: 1.3rem;
    }

    .highlight-stat__number .stat-label--range {
        font-size: 0.85rem;
    }

    .highlight-stat__number .stat-label--weekly {
        font-size: 1.3rem;
    }

    .highlight-stat__label {
        font-size: 0.72rem;
    }

    .btn-view-collections {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .learning-collections__orb--1,
    .learning-collections__orb--2 {
        display: none;
    }

    .learning-collections__shape--2 {
        display: none;
    }

    #learning-collections .particle--3,
    #learning-collections .particle--5,
    #learning-collections .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #learning-collections {
        padding: 40px 0 40px;
    }

    .learning-collections__header {
        margin-bottom: 28px;
    }

    .learning-collections__title {
        font-size: 1.8rem;
    }

    .learning-collections__subtitle {
        font-size: 0.88rem;
    }

    .learning-collections__featured {
        margin-bottom: 32px;
    }

    .featured-path__image {
        min-height: 160px;
    }

    .featured-path__placeholder .placeholder-content i {
        font-size: 2.8rem;
    }

    .featured-path__placeholder .placeholder-content span {
        font-size: 0.9rem;
    }

    .featured-path__content {
        padding: 18px 16px 22px;
        gap: 10px;
    }

    .featured-path__title {
        font-size: 1.1rem;
    }

    .featured-path__meta {
        gap: 6px 12px;
    }

    .featured-path__time,
    .featured-path__lessons {
        font-size: 0.7rem;
    }

    .featured-path__description {
        font-size: 0.82rem;
    }

    .featured-path__objectives {
        grid-template-columns: 1fr;
        font-size: 0.75rem;
        gap: 2px;
    }

    .featured-path__tech span {
        font-size: 0.5rem;
        padding: 2px 10px;
    }

    .btn-path-start {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .learning-collections__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .collection-card__image {
        aspect-ratio: 16/10;
    }

    .collection-card__placeholder {
        font-size: 1.6rem;
    }

    .collection-card__content {
        padding: 12px 12px 14px;
    }

    .collection-card__meta {
        gap: 4px 8px;
        margin-bottom: 6px;
    }

    .collection-card__difficulty {
        font-size: 0.45rem;
        padding: 1px 8px;
    }

    .collection-card__lessons {
        font-size: 0.5rem;
    }

    .collection-card__title {
        font-size: 0.8rem;
    }

    .collection-card__description {
        font-size: 0.65rem;
        margin-bottom: 8px;
    }

    .collection-card__footer {
        padding-top: 8px;
    }

    .collection-card__time {
        font-size: 0.6rem;
    }

    .collection-card__link {
        font-size: 0.65rem;
    }

    .learning-collections__highlights {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 380px;
    }

    .highlight-stat__number {
        font-size: 1.4rem;
    }

    .highlight-stat__number .stat-suffix {
        font-size: 1rem;
    }

    .highlight-stat__number .stat-label--range {
        font-size: 0.7rem;
    }

    .highlight-stat__number .stat-label--weekly {
        font-size: 1rem;
    }

    .highlight-stat__label {
        font-size: 0.65rem;
    }

    .btn-view-collections {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .learning-collections__bg .learning-collections__shape {
        display: none;
    }

    .learning-collections__grid {
        opacity: 1;
    }

    #learning-collections .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #learning-collections {
        padding: 32px 0 32px;
    }

    .learning-collections__title {
        font-size: 1.5rem;
    }

    .learning-collections__subtitle {
        font-size: 0.8rem;
    }

    .featured-path__title {
        font-size: 0.95rem;
    }

    .learning-collections__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .collection-card__content {
        padding: 10px 12px 12px;
    }

    .collection-card__title {
        font-size: 0.75rem;
    }

    .collection-card__description {
        font-size: 0.6rem;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
    }

    .highlight-stat__number {
        font-size: 1.2rem;
    }

    .highlight-stat__number .stat-suffix {
        font-size: 0.85rem;
    }

    .highlight-stat__label {
        font-size: 0.58rem;
    }

    .btn-view-collections {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #learning-collections {
        padding: 24px 0 24px;
    }

    .learning-collections__title {
        font-size: 1.3rem;
    }

    .learning-collections__subtitle {
        font-size: 0.72rem;
    }

    .featured-path__title {
        font-size: 0.85rem;
    }

    .learning-collections__grid {
        gap: 10px;
    }

    .collection-card__title {
        font-size: 0.68rem;
    }

    .collection-card__description {
        font-size: 0.55rem;
    }

    .highlights-grid {
        gap: 6px;
        max-width: 280px;
    }

    .highlight-stat__number {
        font-size: 1rem;
    }

    .highlight-stat__number .stat-suffix {
        font-size: 0.7rem;
    }

    .highlight-stat__label {
        font-size: 0.5rem;
    }
}

/* ==================================================
END: Featured Learning Collections Responsive
================================================== */

/* ==================================================
START: Trending Articles, Popular Topics & Editor's Choice Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #trending-content {
        padding: 60px 0 60px;
    }

    .trending-content__header {
        margin-bottom: 36px;
    }

    .trending-content__title {
        font-size: 2.2rem;
    }

    .trending-content__subtitle {
        font-size: 0.95rem;
    }

    .trending-featured {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 20px;
    }

    .trending-featured__image {
        min-height: 200px;
    }

    .trending-featured__content {
        padding: 24px 24px 28px;
    }

    .trending-featured__title {
        font-size: 1.3rem;
    }

    .trending-featured__excerpt {
        font-size: 0.88rem;
    }

    .trending-content__columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 36px;
    }

    .trending-column:last-child {
        grid-column: span 2;
    }

    .trending-column__items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
    }

    .trending-item {
        border-bottom: none;
        padding: 6px 6px;
    }

    .trending-item__thumb {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .trending-item__title {
        font-size: 0.75rem;
    }

    .trending-item__meta {
        font-size: 0.55rem;
    }

    .trending-content__topics {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .topics-cloud {
        gap: 8px 14px;
    }

    .topic-item--xl {
        font-size: 1.2rem;
    }
    .topic-item--lg {
        font-size: 1.05rem;
    }
    .topic-item--md {
        font-size: 0.9rem;
    }
    .topic-item--sm {
        font-size: 0.75rem;
    }

    .carousel-card {
        min-width: calc(50% - 10px);
    }

    .carousel-track {
        gap: 16px;
    }

    .trending-content__metrics {
        padding: 18px 16px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .trending-metric__value {
        font-size: 0.95rem;
    }

    .btn-view-trending {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .trending-content__orb--1,
    .trending-content__orb--2 {
        display: none;
    }

    .trending-content__shape--2 {
        display: none;
    }

    #trending-content .particle--3,
    #trending-content .particle--5,
    #trending-content .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #trending-content {
        padding: 40px 0 40px;
    }

    .trending-content__header {
        margin-bottom: 28px;
    }

    .trending-content__title {
        font-size: 1.8rem;
    }

    .trending-content__subtitle {
        font-size: 0.88rem;
    }

    .trending-featured__image {
        min-height: 160px;
    }

    .trending-featured__placeholder--featured .placeholder-content i {
        font-size: 2.6rem;
    }

    .trending-featured__content {
        padding: 18px 16px 22px;
        gap: 10px;
    }

    .trending-featured__title {
        font-size: 1.05rem;
    }

    .trending-featured__excerpt {
        font-size: 0.82rem;
    }

    .trending-featured__stats .stat {
        font-size: 0.65rem;
    }

    .trending-featured__tags span {
        font-size: 0.5rem;
        padding: 2px 10px;
    }

    .btn-trending-read {
        font-size: 0.78rem;
        padding: 8px 20px;
        width: 100%;
        justify-content: center;
    }

    .trending-content__columns {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }

    .trending-column:last-child {
        grid-column: span 1;
    }

    .trending-column__items {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .trending-item {
        padding: 8px 6px;
    }

    .trending-item__thumb {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .trending-item__title {
        font-size: 0.72rem;
    }

    .trending-item__badge {
        font-size: 0.5rem;
        padding: 1px 6px;
    }

    .trending-content__topics {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .topics-header {
        gap: 8px;
        flex-wrap: wrap;
    }

    .topics-header__title {
        font-size: 0.9rem;
    }

    .topics-cloud {
        gap: 6px 10px;
    }

    .topic-item--xl {
        font-size: 1rem;
    }
    .topic-item--lg {
        font-size: 0.9rem;
    }
    .topic-item--md {
        font-size: 0.8rem;
    }
    .topic-item--sm {
        font-size: 0.7rem;
    }

    .topic-item::after {
        font-size: 0.4rem;
        padding: 0 4px;
    }

    .carousel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .carousel-header__right {
        align-self: flex-end;
    }

    .carousel-card {
        min-width: calc(100% - 0px);
    }

    .carousel-track {
        gap: 14px;
    }

    .carousel-card__placeholder {
        font-size: 1.6rem;
    }

    .carousel-card__title {
        font-size: 0.82rem;
    }

    .trending-content__metrics {
        padding: 14px 12px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .trending-metric__icon {
        font-size: 1.1rem;
    }

    .trending-metric__label {
        font-size: 0.55rem;
    }

    .trending-metric__value {
        font-size: 0.85rem;
    }

    .btn-view-trending {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .trending-content__bg .trending-content__shape {
        display: none;
    }

    #trending-content .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #trending-content {
        padding: 32px 0 32px;
    }

    .trending-content__title {
        font-size: 1.5rem;
    }

    .trending-content__subtitle {
        font-size: 0.8rem;
    }

    .trending-featured__title {
        font-size: 0.92rem;
    }

    .trending-featured__excerpt {
        font-size: 0.75rem;
    }

    .trending-item__title {
        font-size: 0.65rem;
    }

    .topics-cloud {
        gap: 4px 8px;
    }

    .topic-item--xl {
        font-size: 0.85rem;
    }
    .topic-item--lg {
        font-size: 0.75rem;
    }
    .topic-item--md {
        font-size: 0.7rem;
    }
    .topic-item--sm {
        font-size: 0.6rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .btn-view-trending {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #trending-content {
        padding: 24px 0 24px;
    }

    .trending-content__title {
        font-size: 1.3rem;
    }

    .trending-content__subtitle {
        font-size: 0.72rem;
    }

    .trending-featured__title {
        font-size: 0.82rem;
    }

    .trending-featured__excerpt {
        font-size: 0.68rem;
    }

    .trending-item__title {
        font-size: 0.6rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .trending-metric__value {
        font-size: 0.7rem;
    }

    .trending-metric__label {
        font-size: 0.5rem;
    }
}

/* ==================================================
END: Trending Articles, Popular Topics & Editor's Choice Responsive
================================================== */

/* ==================================================
START: Newsletter, Community & Content Subscription Hub Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #community-subscription {
        padding: 60px 0 60px;
    }

    .community-subscription__header {
        margin-bottom: 36px;
    }

    .community-subscription__title {
        font-size: 2.2rem;
    }

    .community-subscription__subtitle {
        font-size: 0.95rem;
    }

    .community-subscription__main {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 720px;
    }

    .subscription-form {
        padding: 28px 24px 24px;
        border-radius: 20px;
    }

    .subscription-form__title {
        font-size: 1.15rem;
    }

    .subscription-form__description {
        font-size: 0.82rem;
    }

    .preferences-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
    }

    .preference-label {
        font-size: 0.72rem;
    }

    .subscription-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .community-benefits {
        padding: 20px 16px 18px;
        border-radius: 16px;
    }

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

    .benefit-item__text {
        font-size: 0.7rem;
    }

    .trust-indicators {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .trust-indicator__number {
        font-size: 0.95rem;
    }

    .trust-indicator__label {
        font-size: 0.55rem;
    }

    .social-community {
        padding: 14px 14px 12px;
        border-radius: 14px;
    }

    .community-subscription__orb--1,
    .community-subscription__orb--2 {
        display: none;
    }

    .community-subscription__shape--2 {
        display: none;
    }

    #community-subscription .particle--3,
    #community-subscription .particle--5,
    #community-subscription .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #community-subscription {
        padding: 40px 0 40px;
    }

    .community-subscription__header {
        margin-bottom: 28px;
    }

    .community-subscription__title {
        font-size: 1.8rem;
    }

    .community-subscription__subtitle {
        font-size: 0.88rem;
    }

    .community-subscription__main {
        gap: 24px;
        max-width: 480px;
    }

    .subscription-form {
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .subscription-form__header {
        margin-bottom: 20px;
    }

    .subscription-form__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .subscription-form__title {
        font-size: 1.05rem;
    }

    .subscription-form__description {
        font-size: 0.78rem;
    }

    .form-input,
    .form-select {
        padding: 10px 14px;
        font-size: 0.82rem;
        border-radius: 10px;
    }

    .preferences-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 8px;
    }

    .preference-item {
        padding: 4px 8px;
    }

    .preference-label {
        font-size: 0.68rem;
    }

    .consent-text {
        font-size: 0.72rem;
    }

    .btn-subscribe {
        padding: 12px 20px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .subscription-sidebar {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .community-benefits {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .community-benefits__title {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

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

    .benefit-item {
        padding: 2px 0;
    }

    .benefit-item__icon {
        font-size: 0.7rem;
    }

    .benefit-item__text {
        font-size: 0.65rem;
    }

    .trust-indicators {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 12px 10px 10px;
        border-radius: 12px;
        gap: 6px 8px;
    }

    .trust-indicator__number {
        font-size: 0.85rem;
    }

    .trust-indicator__icon {
        font-size: 1rem;
    }

    .trust-indicator__label {
        font-size: 0.5rem;
    }

    .social-community {
        padding: 12px 12px 10px;
        border-radius: 12px;
    }

    .social-community__title {
        font-size: 0.78rem;
        margin-bottom: 10px;
    }

    .social-link {
        width: 34px;
        height: 34px;
        font-size: 0.75rem;
    }

    .community-subscription__bg .community-subscription__shape {
        display: none;
    }

    #community-subscription .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #community-subscription {
        padding: 32px 0 32px;
    }

    .community-subscription__title {
        font-size: 1.5rem;
    }

    .community-subscription__subtitle {
        font-size: 0.8rem;
    }

    .subscription-form {
        padding: 18px 12px 16px;
        border-radius: 14px;
    }

    .subscription-form__title {
        font-size: 0.95rem;
    }

    .preferences-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px 6px;
    }

    .preference-label {
        font-size: 0.62rem;
    }

    .preference-checkbox {
        width: 14px;
        height: 14px;
    }

    .btn-subscribe {
        font-size: 0.78rem;
        padding: 10px 16px;
    }

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

    .benefit-item__text {
        font-size: 0.6rem;
    }

    .trust-indicators {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .trust-indicator__number {
        font-size: 0.75rem;
    }

    .trust-indicator__label {
        font-size: 0.45rem;
    }

    .social-link {
        width: 30px;
        height: 30px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #community-subscription {
        padding: 24px 0 24px;
    }

    .community-subscription__title {
        font-size: 1.3rem;
    }

    .community-subscription__subtitle {
        font-size: 0.72rem;
    }

    .subscription-form {
        padding: 14px 10px 12px;
        border-radius: 12px;
    }

    .preferences-grid {
        grid-template-columns: 1fr;
        gap: 2px 4px;
    }

    .preference-label {
        font-size: 0.58rem;
    }

    .consent-text {
        font-size: 0.62rem;
    }

    .btn-subscribe {
        font-size: 0.72rem;
        padding: 8px 12px;
    }

    .trust-indicators {
        grid-template-columns: 1fr 1fr;
    }

    .trust-indicator__number {
        font-size: 0.65rem;
    }

    .trust-indicator__label {
        font-size: 0.4rem;
    }

    .social-link {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }
}

/* ==================================================
END: Newsletter, Community & Content Subscription Hub Responsive
================================================== */

/* ==================================================
START: Meet Our Authors & Expert Contributors Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #meet-authors {
        padding: 60px 0 60px;
    }

    .meet-authors__header {
        margin-bottom: 36px;
    }

    .meet-authors__title {
        font-size: 2.2rem;
    }

    .meet-authors__subtitle {
        font-size: 0.95rem;
    }

    .featured-author {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 28px;
        padding: 32px 24px 28px;
        border-radius: 20px;
    }

    .featured-author__placeholder {
        width: 120px;
        height: 120px;
    }

    .featured-author__initial {
        font-size: 2.6rem;
    }

    .featured-author__header {
        align-items: center;
    }

    .featured-author__bio {
        text-align: center;
    }

    .featured-author__expertise {
        justify-content: center;
    }

    .featured-author__stats {
        justify-content: center;
    }

    .featured-author__social {
        justify-content: center;
    }

    .btn-featured-author {
        align-self: center;
    }

    .meet-authors__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin-bottom: 32px;
    }

    .author-card {
        padding: 20px 16px 18px;
        border-radius: 16px;
    }

    .author-card__image {
        width: 64px;
        height: 64px;
    }

    .author-card__initial {
        font-size: 1.3rem;
    }

    .author-card__name {
        font-size: 0.92rem;
    }

    .author-card__position {
        font-size: 0.62rem;
    }

    .author-card__bio {
        font-size: 0.72rem;
    }

    .meet-authors__stats {
        padding: 18px 16px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .stat-card__number {
        font-size: 1.6rem;
    }

    .stat-card__number .stat-suffix {
        font-size: 1.2rem;
    }

    .stat-card__number .stat-label--weekly {
        font-size: 1.2rem;
    }

    .stat-card__label {
        font-size: 0.7rem;
    }

    .meet-authors__contributions {
        padding: 16px 16px 14px;
        border-radius: 14px;
        margin-bottom: 32px;
    }

    .contributions-grid {
        gap: 6px 10px;
    }

    .contribution-badge {
        font-size: 0.68rem;
        padding: 3px 12px;
    }

    .btn-view-authors {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .meet-authors__orb--1,
    .meet-authors__orb--2 {
        display: none;
    }

    .meet-authors__shape--2 {
        display: none;
    }

    #meet-authors .particle--3,
    #meet-authors .particle--5,
    #meet-authors .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #meet-authors {
        padding: 40px 0 40px;
    }

    .meet-authors__header {
        margin-bottom: 28px;
    }

    .meet-authors__title {
        font-size: 1.8rem;
    }

    .meet-authors__subtitle {
        font-size: 0.88rem;
    }

    .featured-author {
        padding: 24px 18px 22px;
        border-radius: 16px;
        gap: 20px;
    }

    .featured-author__placeholder {
        width: 100px;
        height: 100px;
    }

    .featured-author__initial {
        font-size: 2.2rem;
    }

    .featured-author__name {
        font-size: 1.3rem;
    }

    .featured-author__position {
        font-size: 0.75rem;
    }

    .featured-author__bio {
        font-size: 0.82rem;
    }

    .expertise-tag {
        font-size: 0.5rem;
        padding: 2px 10px;
    }

    .featured-author__stats .stat-value {
        font-size: 0.95rem;
    }

    .featured-author__stats .stat-label {
        font-size: 0.6rem;
    }

    .featured-author__social .social-link {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .btn-featured-author {
        padding: 8px 20px;
        font-size: 0.78rem;
        width: 100%;
        justify-content: center;
    }

    .meet-authors__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .author-card {
        padding: 16px 14px 16px;
        border-radius: 14px;
    }

    .author-card__image {
        width: 56px;
        height: 56px;
        margin-bottom: 8px;
    }

    .author-card__initial {
        font-size: 1.1rem;
    }

    .author-card__name {
        font-size: 0.82rem;
    }

    .author-card__position {
        font-size: 0.55rem;
        margin-bottom: 8px;
    }

    .author-card__expertise {
        gap: 3px;
        margin-bottom: 8px;
    }

    .author-card__expertise span {
        font-size: 0.45rem;
        padding: 1px 8px;
    }

    .author-card__bio {
        font-size: 0.68rem;
        margin-bottom: 10px;
    }

    .author-card__stats {
        gap: 12px;
        padding: 8px 0 0;
        margin-bottom: 10px;
    }

    .author-card__stats .stat-value {
        font-size: 0.78rem;
    }

    .author-card__stats .stat-label {
        font-size: 0.48rem;
    }

    .author-card__link {
        font-size: 0.7rem;
    }

    .meet-authors__stats {
        padding: 14px 12px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card__number {
        font-size: 1.3rem;
    }

    .stat-card__number .stat-suffix {
        font-size: 1rem;
    }

    .stat-card__number .stat-label--weekly {
        font-size: 1rem;
    }

    .stat-card__label {
        font-size: 0.65rem;
    }

    .meet-authors__contributions {
        padding: 14px 12px 12px;
        border-radius: 12px;
        margin-bottom: 24px;
    }

    .contributions-label {
        font-size: 0.6rem;
        margin-bottom: 8px;
    }

    .contributions-grid {
        gap: 4px 8px;
    }

    .contribution-badge {
        font-size: 0.6rem;
        padding: 2px 10px;
    }

    .btn-view-authors {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .meet-authors__bg .meet-authors__shape {
        display: none;
    }

    #meet-authors .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #meet-authors {
        padding: 32px 0 32px;
    }

    .meet-authors__title {
        font-size: 1.5rem;
    }

    .meet-authors__subtitle {
        font-size: 0.8rem;
    }

    .featured-author__name {
        font-size: 1.1rem;
    }

    .featured-author__bio {
        font-size: 0.75rem;
    }

    .meet-authors__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .author-card {
        padding: 14px 12px 14px;
        border-radius: 12px;
    }

    .author-card__image {
        width: 50px;
        height: 50px;
    }

    .author-card__initial {
        font-size: 1rem;
    }

    .author-card__name {
        font-size: 0.78rem;
    }

    .author-card__bio {
        font-size: 0.62rem;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-card__number {
        font-size: 1.1rem;
    }

    .stat-card__number .stat-suffix {
        font-size: 0.85rem;
    }

    .stat-card__label {
        font-size: 0.58rem;
    }

    .contributions-grid {
        gap: 4px 6px;
    }

    .contribution-badge {
        font-size: 0.55rem;
        padding: 2px 8px;
    }

    .btn-view-authors {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #meet-authors {
        padding: 24px 0 24px;
    }

    .meet-authors__title {
        font-size: 1.3rem;
    }

    .meet-authors__subtitle {
        font-size: 0.72rem;
    }

    .featured-author__placeholder {
        width: 80px;
        height: 80px;
    }

    .featured-author__initial {
        font-size: 1.8rem;
    }

    .featured-author__name {
        font-size: 0.95rem;
    }

    .featured-author__bio {
        font-size: 0.68rem;
    }

    .author-card__image {
        width: 44px;
        height: 44px;
    }

    .author-card__initial {
        font-size: 0.85rem;
    }

    .author-card__name {
        font-size: 0.72rem;
    }

    .author-card__bio {
        font-size: 0.58rem;
    }

    .stat-card__number {
        font-size: 0.95rem;
    }

    .stat-card__number .stat-suffix {
        font-size: 0.7rem;
    }

    .stat-card__label {
        font-size: 0.52rem;
    }
}

/* ==================================================
END: Meet Our Authors & Expert Contributors Responsive
================================================== */

/* ==================================================
START: Blog Statistics, Knowledge Impact & Final CTA Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #blog-impact {
        padding: 60px 0 60px;
    }

    .blog-impact__header {
        margin-bottom: 36px;
    }

    .blog-impact__title {
        font-size: 2.2rem;
    }

    .blog-impact__subtitle {
        font-size: 0.95rem;
    }

    .blog-impact__stats {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 32px;
    }

    .impact-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .impact-stat__number {
        font-size: 1.8rem;
    }

    .impact-stat__number .stat-suffix {
        font-size: 1.3rem;
    }

    .impact-stat__number .stat-label--weekly {
        font-size: 1.3rem;
    }

    .impact-stat__label {
        font-size: 0.72rem;
    }

    .blog-impact__trust {
        padding: 16px 18px 14px;
        border-radius: 14px;
        margin-bottom: 32px;
    }

    .trust-grid {
        gap: 8px 16px;
    }

    .trust-item {
        font-size: 0.75rem;
    }

    .blog-impact__journey {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .journey-steps {
        gap: 8px;
    }

    .journey-step {
        padding: 8px 12px;
        min-width: 60px;
    }

    .journey-step__icon {
        font-size: 1.1rem;
    }

    .journey-step__label {
        font-size: 0.6rem;
    }

    .journey-arrow {
        font-size: 0.65rem;
    }

    .cta-card {
        padding: 32px 28px 28px;
        border-radius: 20px;
        margin-bottom: 32px;
    }

    .cta-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }

    .cta-card__title {
        font-size: 1.3rem;
    }

    .cta-card__description {
        font-size: 0.88rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-link {
        padding: 12px 10px;
        border-radius: 12px;
    }

    .quick-link__icon {
        font-size: 1rem;
    }

    .quick-link__text {
        font-size: 0.62rem;
    }

    .blog-impact__orb--1,
    .blog-impact__orb--3 {
        display: none;
    }

    .blog-impact__shape--3 {
        display: none;
    }

    #blog-impact .particle--3,
    #blog-impact .particle--5,
    #blog-impact .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #blog-impact {
        padding: 40px 0 40px;
    }

    .blog-impact__header {
        margin-bottom: 28px;
    }

    .blog-impact__title {
        font-size: 1.8rem;
    }

    .blog-impact__subtitle {
        font-size: 0.88rem;
    }

    .blog-impact__stats {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .impact-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .impact-stat__number {
        font-size: 1.5rem;
    }

    .impact-stat__number .stat-suffix {
        font-size: 1.1rem;
    }

    .impact-stat__number .stat-label--weekly {
        font-size: 1.1rem;
    }

    .impact-stat__label {
        font-size: 0.65rem;
    }

    .blog-impact__trust {
        padding: 14px 14px 12px;
        border-radius: 12px;
        margin-bottom: 24px;
    }

    .trust-grid {
        gap: 6px 12px;
    }

    .trust-item {
        font-size: 0.68rem;
        gap: 6px;
    }

    .trust-item__icon {
        font-size: 0.7rem;
    }

    .blog-impact__journey {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .journey-header {
        margin-bottom: 14px;
    }

    .journey-header__title {
        font-size: 0.9rem;
    }

    .journey-steps {
        gap: 6px;
    }

    .journey-step {
        padding: 6px 10px;
        min-width: 50px;
        border-radius: 10px;
    }

    .journey-step__icon {
        font-size: 0.9rem;
    }

    .journey-step__label {
        font-size: 0.5rem;
    }

    .journey-arrow {
        font-size: 0.55rem;
    }

    .cta-card {
        padding: 24px 18px 22px;
        border-radius: 18px;
        margin-bottom: 24px;
    }

    .cta-card__icon {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .cta-card__title {
        font-size: 1.05rem;
    }

    .cta-card__description {
        font-size: 0.82rem;
    }

    .cta-card__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .quick-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .quick-link {
        padding: 10px 8px;
        border-radius: 10px;
    }

    .quick-link__icon {
        font-size: 0.9rem;
    }

    .quick-link__text {
        font-size: 0.58rem;
    }

    .blog-impact__bg .blog-impact__shape {
        display: none;
    }

    .blog-impact__grid {
        opacity: 0.1;
    }

    #blog-impact .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #blog-impact {
        padding: 32px 0 32px;
    }

    .blog-impact__title {
        font-size: 1.5rem;
    }

    .blog-impact__subtitle {
        font-size: 0.8rem;
    }

    .impact-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .impact-stat__number {
        font-size: 1.3rem;
    }

    .impact-stat__number .stat-suffix {
        font-size: 0.95rem;
    }

    .impact-stat__number .stat-label--weekly {
        font-size: 0.95rem;
    }

    .impact-stat__label {
        font-size: 0.58rem;
    }

    .trust-item {
        font-size: 0.6rem;
    }

    .cta-card {
        padding: 20px 14px 18px;
        border-radius: 16px;
    }

    .cta-card__title {
        font-size: 0.95rem;
    }

    .cta-card__description {
        font-size: 0.75rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        font-size: 0.78rem;
        padding: 10px 20px;
    }

    .quick-link {
        padding: 8px 6px;
    }

    .quick-link__icon {
        font-size: 0.8rem;
    }

    .quick-link__text {
        font-size: 0.52rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #blog-impact {
        padding: 24px 0 24px;
    }

    .blog-impact__title {
        font-size: 1.3rem;
    }

    .blog-impact__subtitle {
        font-size: 0.72rem;
    }

    .impact-stat__number {
        font-size: 1.1rem;
    }

    .impact-stat__number .stat-suffix {
        font-size: 0.8rem;
    }

    .impact-stat__number .stat-label--weekly {
        font-size: 0.8rem;
    }

    .impact-stat__label {
        font-size: 0.5rem;
    }

    .cta-card__title {
        font-size: 0.85rem;
    }

    .cta-card__description {
        font-size: 0.68rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        font-size: 0.7rem;
        padding: 8px 16px;
    }

    .quick-link__text {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Blog Statistics, Knowledge Impact & Final CTA Responsive
================================================== */

/* ==================================================
START: Documentation Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #docs-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 30px) 0 50px;
        min-height: auto;
    }

    .docs-hero__inner {
        flex-direction: column;
        gap: 40px;
    }

    .docs-hero__content {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .docs-hero__badge {
        align-self: center;
    }

    .docs-hero__title {
        font-size: 2.8rem;
        text-align: center;
    }

    .docs-hero__title .highlight-lime::after {
        bottom: 0;
        height: 8px;
    }

    .docs-hero__description {
        max-width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .docs-hero__buttons {
        justify-content: center;
    }

    .docs-hero__search {
        width: 100%;
        max-width: 560px;
    }

    .docs-hero__quick-links {
        justify-content: center;
    }

    .docs-hero__stats {
        justify-content: center;
    }

    .docs-hero__visual {
        flex: none;
        width: 100%;
        min-height: 420px;
    }

    .docs-visual__mockup {
        max-width: 420px;
    }

    .mockup__sidebar {
        width: 110px;
        padding: 12px 10px;
    }

    .sidebar__item {
        font-size: 0.6rem;
        padding: 4px 8px;
    }

    .docs-visual__resource {
        padding: 6px 12px;
        max-width: 120px;
    }

    .docs-visual__resource .resource-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.6rem;
    }

    .docs-visual__resource .resource-label {
        font-size: 0.4rem;
    }

    .docs-visual__resource .resource-value {
        font-size: 0.55rem;
    }

    .docs-visual__resource--1 {
        top: 0%;
        right: 0%;
    }
    .docs-visual__resource--2 {
        bottom: 18%;
        left: -2%;
    }
    .docs-visual__resource--3 {
        bottom: 0%;
        right: 4%;
    }
    .docs-visual__resource--4 {
        top: 20%;
        left: -2%;
    }
    .docs-visual__resource--5 {
        top: 8%;
        left: -2%;
    }
    .docs-visual__resource--6 {
        bottom: 10%;
        right: 0%;
    }

    .docs-visual__tech {
        display: none;
    }

    .docs-hero__orb--1,
    .docs-hero__orb--3 {
        display: none;
    }

    .docs-hero__shape--3 {
        display: none;
    }

    #docs-hero .particle--3,
    #docs-hero .particle--5,
    #docs-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #docs-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 24px) 0 40px;
    }

    .docs-hero__inner {
        gap: 32px;
    }

    .docs-hero__title {
        font-size: 2.2rem;
    }

    .docs-hero__title .highlight-lime::after {
        height: 6px;
    }

    .docs-hero__description {
        font-size: 0.88rem;
    }

    .btn-docs-primary,
    .btn-docs-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.85rem;
    }

    .docs-hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .docs-hero__search {
        max-width: 100%;
    }

    .search-container {
        padding: 4px 4px 4px 14px;
        border-radius: 40px;
        flex-wrap: wrap;
    }

    .search-input {
        font-size: 0.82rem;
        padding: 10px 6px;
        width: 100%;
        min-width: 100%;
        order: 2;
    }

    .search-icon {
        font-size: 0.8rem;
        order: 1;
    }

    .search-clear {
        order: 3;
        font-size: 0.85rem;
    }

    .search-voice {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        order: 4;
    }

    .search-submit {
        padding: 8px 16px;
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
        border-radius: 40px;
        order: 5;
        margin-top: 2px;
    }

    .search-recent {
        gap: 4px 10px;
    }

    .recent-label {
        font-size: 0.6rem;
    }

    .recent-chip {
        font-size: 0.6rem;
        padding: 2px 10px;
    }

    .docs-hero__quick-links {
        gap: 4px 8px;
    }

    .quick-label {
        font-size: 0.6rem;
        width: 100%;
        text-align: center;
    }

    .quick-chip {
        font-size: 0.6rem;
        padding: 2px 10px;
    }

    .docs-hero__stats {
        gap: 8px 12px;
    }

    .docs-hero__stats .stat-number {
        font-size: 1rem;
    }

    .docs-hero__stats .stat-suffix {
        font-size: 0.85rem;
    }

    .docs-hero__stats .stat-label {
        font-size: 0.65rem;
    }

    .docs-hero__stats .stat-divider {
        height: 18px;
    }

    .docs-hero__visual {
        min-height: 340px;
    }

    .docs-visual__mockup {
        max-width: 340px;
        border-radius: 14px;
    }

    .mockup__sidebar {
        width: 90px;
        padding: 10px 8px;
    }

    .sidebar__header {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .sidebar__title {
        font-size: 0.65rem;
    }

    .sidebar__item {
        font-size: 0.5rem;
        padding: 3px 6px;
    }

    .content__header {
        margin-bottom: 10px;
    }

    .content__title {
        font-size: 0.7rem;
    }

    .content__badge {
        font-size: 0.45rem;
        padding: 1px 8px;
    }

    .content__line {
        height: 4px;
    }

    .content__code {
        padding: 8px 10px;
    }

    .code-line {
        font-size: 0.5rem;
    }

    .action-btn {
        font-size: 0.5rem;
        padding: 2px 10px;
    }

    .docs-visual__resource {
        padding: 4px 10px;
        max-width: 100px;
        border-radius: 10px;
    }

    .docs-visual__resource .resource-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.5rem;
    }

    .docs-visual__resource .resource-label {
        font-size: 0.35rem;
    }

    .docs-visual__resource .resource-value {
        font-size: 0.48rem;
    }

    .docs-visual__resource--5,
    .docs-visual__resource--6 {
        display: none;
    }

    .docs-visual__resource--1 {
        top: 0%;
        right: 0%;
    }
    .docs-visual__resource--2 {
        bottom: 12%;
        left: -2%;
    }
    .docs-visual__resource--3 {
        bottom: 0%;
        right: 2%;
    }
    .docs-visual__resource--4 {
        top: 16%;
        left: -2%;
    }

    .docs-visual__orb {
        width: 80px;
        height: 80px;
    }

    .docs-hero__bg .docs-hero__shape {
        display: none;
    }

    .docs-hero__grid {
        opacity: 0.1;
    }

    #docs-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #docs-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 20px) 0 32px;
    }

    .docs-hero__title {
        font-size: 1.8rem;
    }

    .docs-hero__title .highlight-lime::after {
        height: 5px;
    }

    .docs-hero__description {
        font-size: 0.8rem;
    }

    .btn-docs-primary,
    .btn-docs-secondary {
        font-size: 0.78rem;
        padding: 10px 20px;
    }

    .search-input {
        font-size: 0.75rem;
        padding: 8px 6px;
    }

    .search-submit {
        padding: 6px 14px;
        font-size: 0.7rem;
    }

    .docs-visual__mockup {
        max-width: 290px;
        border-radius: 12px;
    }

    .mockup__sidebar {
        width: 70px;
        padding: 8px 6px;
    }

    .sidebar__item {
        font-size: 0.45rem;
        padding: 2px 4px;
    }

    .content__header {
        margin-bottom: 8px;
    }

    .content__title {
        font-size: 0.6rem;
    }

    .content__code {
        padding: 6px 8px;
    }

    .code-line {
        font-size: 0.45rem;
    }

    .docs-visual__resource--2,
    .docs-visual__resource--4 {
        display: none;
    }

    .docs-visual__resource--1 {
        top: 0%;
        right: 0%;
    }
    .docs-visual__resource--3 {
        bottom: 0%;
        right: 0%;
    }

    .docs-visual__orb {
        width: 60px;
        height: 60px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #docs-hero {
        padding: calc(var(--top-bar-height) + var(--nav-height) + 16px) 0 24px;
    }

    .docs-hero__title {
        font-size: 1.5rem;
    }

    .docs-hero__title .highlight-lime::after {
        height: 4px;
    }

    .docs-hero__description {
        font-size: 0.72rem;
    }

    .docs-visual__mockup {
        max-width: 250px;
        border-radius: 10px;
    }

    .mockup__sidebar {
        width: 60px;
        padding: 6px 4px;
    }

    .sidebar__item {
        font-size: 0.4rem;
        padding: 2px 4px;
    }

    .content__title {
        font-size: 0.5rem;
    }

    .content__badge {
        font-size: 0.4rem;
        padding: 0 6px;
    }

    .content__code {
        padding: 4px 6px;
    }

    .code-line {
        font-size: 0.4rem;
    }

    .action-btn {
        font-size: 0.4rem;
        padding: 2px 8px;
    }

    .docs-visual__orb {
        width: 50px;
        height: 50px;
    }
}

/* ==================================================
END: Documentation Hero Banner Responsive
================================================== */

/* ==================================================
START: Documentation Categories Hub Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #docs-categories {
        padding: 60px 0 60px;
    }

    .docs-categories__header {
        margin-bottom: 36px;
    }

    .docs-categories__title {
        font-size: 2.2rem;
    }

    .docs-categories__subtitle {
        font-size: 0.95rem;
    }

    .featured-category {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 24px 28px;
        border-radius: 20px;
    }

    .featured-category__icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }

    .featured-category__title {
        font-size: 1.2rem;
    }

    .featured-category__description {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .featured-category__meta {
        gap: 8px 12px;
    }

    .featured-category__count,
    .featured-category__time,
    .featured-category__update {
        font-size: 0.72rem;
    }

    .btn-featured-docs {
        padding: 8px 22px;
        font-size: 0.8rem;
    }

    .featured-category__visual {
        width: 80px;
        height: 80px;
        align-self: center;
    }

    .featured-visual__orb--1 {
        width: 60px;
        height: 60px;
    }
    .featured-visual__orb--2 {
        width: 40px;
        height: 40px;
    }
    .featured-visual__node {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .docs-categories__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 720px;
        margin-bottom: 32px;
    }

    .category-card {
        padding: 20px 18px 18px;
        border-radius: 16px;
    }

    .category-card__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .category-card__title {
        font-size: 0.92rem;
    }

    .category-card__description {
        font-size: 0.78rem;
    }

    .category-card__meta {
        padding-top: 10px;
        margin-bottom: 10px;
    }

    .category-card__count {
        font-size: 0.65rem;
    }
    .category-card__update {
        font-size: 0.55rem;
    }
    .category-card__link {
        font-size: 0.75rem;
    }

    .docs-categories__highlights {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin: 0 auto;
    }

    .highlight-stat__number {
        font-size: 1.8rem;
    }
    .highlight-stat__number .stat-suffix {
        font-size: 1.3rem;
    }
    .highlight-stat__number .stat-label--weekly {
        font-size: 1.3rem;
    }
    .highlight-stat__label {
        font-size: 0.72rem;
    }

    .btn-view-docs {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .docs-categories__orb--1,
    .docs-categories__orb--2 {
        display: none;
    }

    .docs-categories__shape--2 {
        display: none;
    }

    #docs-categories .particle--3,
    #docs-categories .particle--5,
    #docs-categories .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #docs-categories {
        padding: 40px 0 40px;
    }

    .docs-categories__header {
        margin-bottom: 28px;
    }

    .docs-categories__title {
        font-size: 1.8rem;
    }

    .docs-categories__subtitle {
        font-size: 0.88rem;
    }

    .featured-category {
        padding: 20px 18px 22px;
        border-radius: 16px;
        gap: 16px;
    }

    .featured-category__icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        border-radius: 16px;
    }

    .featured-category__title {
        font-size: 1.05rem;
    }

    .featured-category__description {
        font-size: 0.8rem;
    }

    .featured-category__meta {
        gap: 6px 10px;
        flex-wrap: wrap;
    }

    .featured-category__count,
    .featured-category__time,
    .featured-category__update {
        font-size: 0.65rem;
    }

    .btn-featured-docs {
        padding: 8px 18px;
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .featured-category__visual {
        width: 60px;
        height: 60px;
    }

    .featured-visual__orb--1 {
        width: 45px;
        height: 45px;
    }
    .featured-visual__orb--2 {
        width: 30px;
        height: 30px;
    }
    .featured-visual__node {
        width: 22px;
        height: 22px;
        font-size: 0.5rem;
    }

    .docs-categories__filters {
        margin-bottom: 24px;
    }

    .filter-bar {
        gap: 6px 10px;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-pill {
        padding: 4px 14px;
        font-size: 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .docs-categories__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .category-card {
        padding: 16px 14px 16px;
        border-radius: 14px;
    }

    .category-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .category-card__title {
        font-size: 0.82rem;
    }

    .category-card__description {
        font-size: 0.7rem;
        margin-bottom: 10px;
    }

    .category-card__meta {
        padding-top: 8px;
        margin-bottom: 8px;
    }

    .category-card__count {
        font-size: 0.58rem;
    }
    .category-card__update {
        font-size: 0.5rem;
    }
    .category-card__link {
        font-size: 0.7rem;
    }

    .docs-categories__highlights {
        padding: 16px 16px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 380px;
    }

    .highlight-stat__number {
        font-size: 1.4rem;
    }
    .highlight-stat__number .stat-suffix {
        font-size: 1rem;
    }
    .highlight-stat__number .stat-label--weekly {
        font-size: 1rem;
    }
    .highlight-stat__label {
        font-size: 0.65rem;
    }

    .btn-view-docs {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .docs-categories__bg .docs-categories__shape {
        display: none;
    }

    #docs-categories .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #docs-categories {
        padding: 32px 0 32px;
    }

    .docs-categories__title {
        font-size: 1.5rem;
    }

    .docs-categories__subtitle {
        font-size: 0.8rem;
    }

    .featured-category__title {
        font-size: 0.95rem;
    }

    .docs-categories__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .category-card {
        padding: 14px 12px 14px;
        border-radius: 12px;
    }

    .category-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .category-card__title {
        font-size: 0.78rem;
    }

    .category-card__description {
        font-size: 0.65rem;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
    }

    .highlight-stat__number {
        font-size: 1.2rem;
    }
    .highlight-stat__number .stat-suffix {
        font-size: 0.85rem;
    }
    .highlight-stat__number .stat-label--weekly {
        font-size: 0.85rem;
    }
    .highlight-stat__label {
        font-size: 0.58rem;
    }

    .btn-view-docs {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #docs-categories {
        padding: 24px 0 24px;
    }

    .docs-categories__title {
        font-size: 1.3rem;
    }

    .docs-categories__subtitle {
        font-size: 0.72rem;
    }

    .category-card {
        padding: 12px 10px 12px;
        border-radius: 10px;
    }

    .category-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .category-card__title {
        font-size: 0.7rem;
    }

    .category-card__description {
        font-size: 0.6rem;
    }

    .category-card__link {
        font-size: 0.62rem;
    }

    .highlights-grid {
        gap: 6px;
        max-width: 280px;
    }

    .highlight-stat__number {
        font-size: 1rem;
    }
    .highlight-stat__number .stat-suffix {
        font-size: 0.7rem;
    }
    .highlight-stat__number .stat-label--weekly {
        font-size: 0.7rem;
    }
    .highlight-stat__label {
        font-size: 0.5rem;
    }
}

/* ==================================================
END: Documentation Categories Hub Responsive
================================================== */

/* ==================================================
START: Quick Start Guides & Developer Onboarding Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #quick-start {
        padding: 60px 0 60px;
    }

    .quick-start__header {
        margin-bottom: 36px;
    }

    .quick-start__title {
        font-size: 2.2rem;
    }

    .quick-start__subtitle {
        font-size: 0.95rem;
    }

    .timeline-step__description {
        display: none;
    }

    .timeline-step__title {
        font-size: 0.7rem;
    }

    .timeline-step__icon {
        font-size: 1rem;
    }

    .timeline-connector {
        top: 44px;
        left: 8%;
        right: 8%;
    }

    .guides-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 720px;
    }

    .guide-card {
        padding: 18px 16px 18px;
        border-radius: 16px;
    }

    .guide-card__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .guide-card__title {
        font-size: 0.85rem;
    }

    .guide-card__description {
        font-size: 0.72rem;
    }

    .featured-guide {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 20px;
    }

    .featured-guide__image {
        min-height: 200px;
    }

    .featured-guide__placeholder .placeholder-content i {
        font-size: 2.6rem;
    }

    .featured-guide__content {
        padding: 24px 24px 28px;
    }

    .featured-guide__title {
        font-size: 1.2rem;
    }

    .featured-guide__description {
        font-size: 0.85rem;
    }

    .btn-featured-guide {
        width: 100%;
        justify-content: center;
    }

    .quick-start__resources {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 10px;
    }

    .resource-item {
        padding: 6px 10px;
    }

    .resource-item__label {
        font-size: 0.68rem;
    }

    .quick-start__progress {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .progress-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .progress-stat__number {
        font-size: 1.6rem;
    }
    .progress-stat__number .stat-suffix {
        font-size: 1.2rem;
    }
    .progress-stat__number .stat-label--weekly {
        font-size: 1.2rem;
    }
    .progress-stat__label {
        font-size: 0.72rem;
    }

    .btn-view-guides {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .quick-start__orb--1,
    .quick-start__orb--2 {
        display: none;
    }

    .quick-start__shape--2 {
        display: none;
    }

    #quick-start .particle--3,
    #quick-start .particle--5,
    #quick-start .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #quick-start {
        padding: 40px 0 40px;
    }

    .quick-start__header {
        margin-bottom: 28px;
    }

    .quick-start__title {
        font-size: 1.8rem;
    }

    .quick-start__subtitle {
        font-size: 0.88rem;
    }

    .quick-start__timeline {
        padding: 10px 0 20px;
        margin-bottom: 32px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .quick-start__timeline::-webkit-scrollbar {
        display: none;
    }

    .timeline-steps {
        min-width: 700px;
        gap: 8px;
        padding: 0 8px;
    }

    .timeline-step__node {
        margin-bottom: 8px;
    }

    .timeline-step__number {
        font-size: 0.45rem;
        padding: 1px 6px;
    }

    .timeline-step__dot {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .timeline-step__icon {
        font-size: 0.9rem;
    }

    .timeline-step__title {
        font-size: 0.6rem;
    }

    .timeline-step__time {
        font-size: 0.45rem;
    }

    .timeline-connector {
        top: 38px;
        left: 6%;
        right: 6%;
        height: 2px;
    }

    .guides-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 480px;
    }

    .guide-card {
        padding: 16px 14px 16px;
        border-radius: 14px;
    }

    .guide-card__icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
        border-radius: 10px;
        margin-bottom: 6px;
    }

    .guide-card__title {
        font-size: 0.78rem;
    }

    .guide-card__description {
        font-size: 0.65rem;
        margin-bottom: 8px;
    }

    .guide-card__meta {
        gap: 6px 10px;
        margin-bottom: 10px;
    }

    .guide-card__time {
        font-size: 0.55rem;
    }

    .guide-card__link {
        font-size: 0.7rem;
    }

    .featured-guide__image {
        min-height: 160px;
    }

    .featured-guide__placeholder .placeholder-content i {
        font-size: 2rem;
    }

    .featured-guide__placeholder .placeholder-content span {
        font-size: 0.8rem;
    }

    .featured-guide__content {
        padding: 18px 16px 22px;
    }

    .featured-guide__title {
        font-size: 1.05rem;
    }

    .featured-guide__description {
        font-size: 0.8rem;
    }

    .featured-guide__meta {
        gap: 8px 14px;
    }

    .featured-guide__steps,
    .featured-guide__time {
        font-size: 0.7rem;
    }

    .featured-guide__tech span {
        font-size: 0.5rem;
        padding: 1px 10px;
    }

    .btn-featured-guide {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .quick-start__resources {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .resources-header__title {
        font-size: 0.85rem;
    }

    .resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .resource-item {
        padding: 4px 8px;
        border-radius: 8px;
        gap: 6px;
    }

    .resource-item__icon {
        font-size: 0.7rem;
    }

    .resource-item__label {
        font-size: 0.6rem;
    }

    .quick-start__progress {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .progress-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 380px;
    }

    .progress-stat__number {
        font-size: 1.3rem;
    }
    .progress-stat__number .stat-suffix {
        font-size: 1rem;
    }
    .progress-stat__number .stat-label--weekly {
        font-size: 1rem;
    }
    .progress-stat__label {
        font-size: 0.65rem;
    }

    .btn-view-guides {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .quick-start__bg .quick-start__shape {
        display: none;
    }

    #quick-start .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #quick-start {
        padding: 32px 0 32px;
    }

    .quick-start__title {
        font-size: 1.5rem;
    }

    .quick-start__subtitle {
        font-size: 0.8rem;
    }

    .guides-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 340px;
    }

    .guide-card {
        padding: 14px 12px 14px;
        border-radius: 12px;
    }

    .guide-card__title {
        font-size: 0.72rem;
    }

    .guide-card__description {
        font-size: 0.6rem;
    }

    .resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .resource-item__label {
        font-size: 0.55rem;
    }

    .progress-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 320px;
    }

    .progress-stat__number {
        font-size: 1.1rem;
    }
    .progress-stat__number .stat-suffix {
        font-size: 0.85rem;
    }
    .progress-stat__number .stat-label--weekly {
        font-size: 0.85rem;
    }
    .progress-stat__label {
        font-size: 0.58rem;
    }

    .featured-guide__title {
        font-size: 0.95rem;
    }

    .btn-view-guides {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #quick-start {
        padding: 24px 0 24px;
    }

    .quick-start__title {
        font-size: 1.3rem;
    }

    .quick-start__subtitle {
        font-size: 0.72rem;
    }

    .guide-card__title {
        font-size: 0.65rem;
    }

    .guide-card__description {
        font-size: 0.55rem;
    }

    .resource-item__label {
        font-size: 0.5rem;
    }

    .progress-stat__number {
        font-size: 0.95rem;
    }
    .progress-stat__number .stat-suffix {
        font-size: 0.7rem;
    }
    .progress-stat__number .stat-label--weekly {
        font-size: 0.7rem;
    }
    .progress-stat__label {
        font-size: 0.5rem;
    }
}

/* ==================================================
END: Quick Start Guides & Developer Onboarding Responsive
================================================== */

/* ==================================================
START: Documentation Explorer & Interactive Navigation Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #docs-explorer {
        padding: 60px 0 60px;
    }

    .docs-explorer__header {
        margin-bottom: 36px;
    }

    .docs-explorer__title {
        font-size: 2.2rem;
    }

    .docs-explorer__subtitle {
        font-size: 0.95rem;
    }

    .docs-explorer__container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .docs-explorer__sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .docs-explorer__panel {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .info-panel {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .info-panel__actions {
        grid-template-columns: 1fr 1fr;
    }

    .docs-explorer__actions {
        margin-bottom: 32px;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action {
        padding: 12px 8px;
    }

    .docs-explorer__insights {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .insights-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .insight-stat__number {
        font-size: 1.6rem;
    }
    .insight-stat__number .stat-suffix {
        font-size: 1.2rem;
    }
    .insight-stat__number .stat-label--weekly {
        font-size: 1.2rem;
    }
    .insight-stat__label {
        font-size: 0.7rem;
    }

    .btn-view-docs-explorer {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .docs-explorer__orb--1,
    .docs-explorer__orb--2 {
        display: none;
    }

    .docs-explorer__shape--2 {
        display: none;
    }

    #docs-explorer .particle--3,
    #docs-explorer .particle--5,
    #docs-explorer .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #docs-explorer {
        padding: 40px 0 40px;
    }

    .docs-explorer__header {
        margin-bottom: 28px;
    }

    .docs-explorer__title {
        font-size: 1.8rem;
    }

    .docs-explorer__subtitle {
        font-size: 0.88rem;
    }

    .docs-explorer__container {
        gap: 18px;
    }

    .docs-explorer__sidebar {
        padding: 16px 12px 14px;
        border-radius: 14px;
    }

    .sidebar-search {
        padding: 4px 8px;
        border-radius: 8px;
    }

    .sidebar-search__input {
        font-size: 0.75rem;
    }

    .tree-category__toggle {
        font-size: 0.75rem;
        padding: 6px 8px;
    }

    .tree-category__icon {
        font-size: 0.7rem;
    }

    .tree-link {
        font-size: 0.68rem;
        padding: 4px 8px;
    }

    .tree-subcategories {
        padding-left: 20px;
    }

    .doc-preview {
        padding: 18px 16px 20px;
        border-radius: 14px;
    }

    .doc-preview__breadcrumb {
        font-size: 0.65rem;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .doc-preview__title {
        font-size: 1.3rem;
    }

    .doc-preview__meta {
        gap: 8px 12px;
    }

    .meta-item {
        font-size: 0.65rem;
    }

    .doc-preview__body {
        font-size: 0.82rem;
    }

    .doc-preview__body h2 {
        font-size: 1.1rem;
        margin: 18px 0 10px;
    }

    .doc-preview__note {
        padding: 10px 14px;
        font-size: 0.75rem;
    }

    .doc-preview__code pre {
        padding: 10px 12px;
    }

    .doc-preview__code code {
        font-size: 0.65rem;
    }

    .doc-preview__nav {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .doc-preview__nav a {
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
        padding: 8px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        border: 1px solid var(--color-gray-light);
    }

    .doc-preview__related ul {
        flex-direction: column;
        gap: 4px;
    }

    .docs-explorer__panel {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .info-panel {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .info-panel__title {
        font-size: 0.7rem;
    }

    .toc-link {
        font-size: 0.7rem;
    }

    .info-panel__actions {
        grid-template-columns: 1fr 1fr;
    }

    .action-btn {
        font-size: 0.58rem;
        padding: 4px 6px;
    }

    .docs-explorer__actions {
        margin-bottom: 24px;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .quick-action {
        padding: 10px 6px;
        border-radius: 12px;
    }

    .quick-action__icon {
        font-size: 1rem;
    }

    .quick-action__label {
        font-size: 0.55rem;
    }

    .docs-explorer__insights {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .insights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 380px;
    }

    .insight-stat__number {
        font-size: 1.3rem;
    }
    .insight-stat__number .stat-suffix {
        font-size: 1rem;
    }
    .insight-stat__number .stat-label--weekly {
        font-size: 1rem;
    }
    .insight-stat__label {
        font-size: 0.62rem;
    }

    .btn-view-docs-explorer {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .docs-explorer__bg .docs-explorer__shape {
        display: none;
    }

    #docs-explorer .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #docs-explorer {
        padding: 32px 0 32px;
    }

    .docs-explorer__title {
        font-size: 1.5rem;
    }

    .docs-explorer__subtitle {
        font-size: 0.8rem;
    }

    .doc-preview__title {
        font-size: 1.1rem;
    }

    .doc-preview__body {
        font-size: 0.75rem;
    }

    .doc-preview__body h2 {
        font-size: 1rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .quick-action {
        padding: 8px 4px;
    }

    .quick-action__icon {
        font-size: 0.85rem;
    }

    .quick-action__label {
        font-size: 0.5rem;
    }

    .insights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 320px;
    }

    .insight-stat__number {
        font-size: 1.1rem;
    }
    .insight-stat__number .stat-suffix {
        font-size: 0.85rem;
    }
    .insight-stat__number .stat-label--weekly {
        font-size: 0.85rem;
    }
    .insight-stat__label {
        font-size: 0.55rem;
    }

    .btn-view-docs-explorer {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .doc-preview__nav a {
        font-size: 0.68rem;
        padding: 6px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #docs-explorer {
        padding: 24px 0 24px;
    }

    .docs-explorer__title {
        font-size: 1.3rem;
    }

    .docs-explorer__subtitle {
        font-size: 0.72rem;
    }

    .doc-preview__title {
        font-size: 0.95rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .quick-action {
        padding: 6px 2px;
    }

    .quick-action__icon {
        font-size: 0.7rem;
    }

    .quick-action__label {
        font-size: 0.45rem;
    }

    .insights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        max-width: 280px;
    }

    .insight-stat__number {
        font-size: 0.95rem;
    }
    .insight-stat__number .stat-suffix {
        font-size: 0.7rem;
    }
    .insight-stat__number .stat-label--weekly {
        font-size: 0.7rem;
    }
    .insight-stat__label {
        font-size: 0.48rem;
    }
}

/* ==================================================
END: Documentation Explorer & Interactive Navigation Responsive
================================================== */

/* ==================================================
START: Featured Documentation, Popular Guides & Recently Updated Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #featured-docs {
        padding: 60px 0 60px;
    }

    .featured-docs__header {
        margin-bottom: 32px;
    }

    .featured-docs__title {
        font-size: 2.2rem;
    }

    .featured-docs__subtitle {
        font-size: 0.95rem;
    }

    .featured-guide {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 20px;
    }

    .featured-guide__image {
        min-height: 200px;
    }

    .featured-guide__placeholder .placeholder-content i {
        font-size: 2.6rem;
    }

    .featured-guide__content {
        padding: 24px 24px 28px;
    }

    .featured-guide__title {
        font-size: 1.2rem;
    }

    .featured-guide__description {
        font-size: 0.85rem;
    }

    .btn-featured-guide {
        width: 100%;
        justify-content: center;
    }

    .featured-docs__columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 36px;
    }

    .docs-column:last-child {
        grid-column: span 2;
    }

    .docs-column__items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 12px;
    }

    .docs-item {
        border-bottom: none;
        padding: 6px 4px;
    }

    .docs-item__thumb {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .docs-item__title {
        font-size: 0.72rem;
    }

    .docs-item__meta {
        font-size: 0.5rem;
    }

    .featured-docs__timeline {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .timeline-item {
        flex-direction: column;
        gap: 6px;
    }

    .timeline-item__date {
        min-width: auto;
        font-size: 0.6rem;
    }

    .timeline-item__title {
        font-size: 0.82rem;
    }

    .timeline-item__summary {
        font-size: 0.72rem;
    }

    .featured-docs__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .metric-stat__number {
        font-size: 1.6rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 1.2rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 1.2rem;
    }
    .metric-stat__label {
        font-size: 0.72rem;
    }

    .btn-view-docs-featured {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .featured-docs__orb--1,
    .featured-docs__orb--2 {
        display: none;
    }

    .featured-docs__shape--2 {
        display: none;
    }

    #featured-docs .particle--3,
    #featured-docs .particle--5,
    #featured-docs .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #featured-docs {
        padding: 40px 0 40px;
    }

    .featured-docs__header {
        margin-bottom: 24px;
    }

    .featured-docs__title {
        font-size: 1.8rem;
    }

    .featured-docs__subtitle {
        font-size: 0.88rem;
    }

    .featured-docs__filters {
        margin-bottom: 24px;
    }

    .filter-bar {
        gap: 6px 10px;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-pill {
        padding: 4px 14px;
        font-size: 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .featured-guide__image {
        min-height: 160px;
    }

    .featured-guide__placeholder .placeholder-content i {
        font-size: 2rem;
    }

    .featured-guide__placeholder .placeholder-content span {
        font-size: 0.8rem;
    }

    .featured-guide__content {
        padding: 18px 16px 22px;
    }

    .featured-guide__meta {
        gap: 6px 10px;
    }

    .featured-guide__title {
        font-size: 1.05rem;
    }

    .featured-guide__description {
        font-size: 0.8rem;
    }

    .featured-guide__tech span {
        font-size: 0.5rem;
        padding: 1px 10px;
    }

    .btn-featured-guide {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .featured-docs__columns {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 28px;
    }

    .docs-column:last-child {
        grid-column: span 1;
    }

    .docs-column__items {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .docs-column {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .docs-item {
        padding: 6px 4px;
    }

    .docs-item__thumb {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .docs-item__title {
        font-size: 0.68rem;
    }

    .docs-item__badge {
        font-size: 0.55rem;
    }

    .featured-docs__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .timeline-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .timeline-header__count {
        margin-left: 0;
    }

    .timeline-item {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .timeline-item__date {
        font-size: 0.55rem;
    }

    .timeline-item__title {
        font-size: 0.78rem;
    }

    .timeline-item__summary {
        font-size: 0.68rem;
    }

    .timeline-item__version {
        font-size: 0.5rem;
    }

    .timeline-item__link {
        font-size: 0.62rem;
    }

    .featured-docs__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 380px;
    }

    .metric-stat__number {
        font-size: 1.3rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 1rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 1rem;
    }
    .metric-stat__label {
        font-size: 0.65rem;
    }

    .btn-view-docs-featured {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .featured-docs__bg .featured-docs__shape {
        display: none;
    }

    #featured-docs .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #featured-docs {
        padding: 32px 0 32px;
    }

    .featured-docs__title {
        font-size: 1.5rem;
    }

    .featured-docs__subtitle {
        font-size: 0.8rem;
    }

    .featured-guide__title {
        font-size: 0.95rem;
    }

    .featured-guide__description {
        font-size: 0.72rem;
    }

    .docs-item__title {
        font-size: 0.62rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 320px;
    }

    .metric-stat__number {
        font-size: 1.1rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 0.85rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 0.85rem;
    }
    .metric-stat__label {
        font-size: 0.58rem;
    }

    .btn-view-docs-featured {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .timeline-item__title {
        font-size: 0.72rem;
    }

    .timeline-item__summary {
        font-size: 0.62rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #featured-docs {
        padding: 24px 0 24px;
    }

    .featured-docs__title {
        font-size: 1.3rem;
    }

    .featured-docs__subtitle {
        font-size: 0.72rem;
    }

    .featured-guide__title {
        font-size: 0.85rem;
    }

    .docs-item__title {
        font-size: 0.58rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        max-width: 280px;
    }

    .metric-stat__number {
        font-size: 0.95rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 0.7rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 0.7rem;
    }
    .metric-stat__label {
        font-size: 0.5rem;
    }

    .btn-view-docs-featured {
        font-size: 0.7rem;
        padding: 6px 16px;
    }
}

/* ==================================================
END: Featured Documentation, Popular Guides & Recently Updated Responsive
================================================== */

/* ==================================================
START: API Documentation Center & Interactive Endpoint Explorer Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #api-docs {
        padding: 60px 0 60px;
    }

    .api-docs__header {
        margin-bottom: 36px;
    }

    .api-docs__title {
        font-size: 2.2rem;
    }

    .api-docs__subtitle {
        font-size: 0.95rem;
    }

    .api-featured {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 24px 28px;
        border-radius: 20px;
    }

    .api-featured__icon {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }

    .api-featured__title {
        font-size: 1.2rem;
    }

    .api-featured__description {
        max-width: 100%;
        font-size: 0.85rem;
    }

    .btn-api-featured {
        width: 100%;
        justify-content: center;
    }

    .api-docs__workspace {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 36px;
    }

    .api-workspace__sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding: 16px 14px 14px;
        border-radius: 16px;
    }

    .api-sidebar__categories {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px 12px;
    }

    .api-endpoints {
        padding-left: 20px;
    }

    .api-category__toggle {
        font-size: 0.72rem;
        padding: 4px 6px;
    }

    .api-endpoint-link {
        font-size: 0.62rem;
        padding: 3px 8px;
    }

    .api-workspace__endpoints {
        padding: 16px 16px 14px;
        border-radius: 16px;
    }

    .endpoint-item__header {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .endpoint-url {
        font-size: 0.7rem;
    }

    .endpoint-item__body {
        padding: 0 12px;
    }

    .endpoint-item.active .endpoint-item__body {
        padding: 0 12px 12px;
    }

    .endpoint-details {
        gap: 8px;
    }

    .api-workspace__details {
        position: static;
    }

    .api-details-panel {
        padding: 16px 16px 14px;
        border-radius: 16px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }

    .api-details-panel__title {
        grid-column: span 3;
        margin-bottom: 0;
    }

    .api-details-panel__method {
        grid-column: span 1;
        margin-bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 6px 10px;
    }

    .api-details-panel__status {
        grid-column: span 1;
        margin-bottom: 0;
        flex-direction: column;
        gap: 4px;
    }

    .api-details-panel__section {
        grid-column: span 1;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .api-details-panel__section:last-child {
        border-bottom: none;
    }

    .api-details-panel__section .section-label {
        font-size: 0.5rem;
    }

    .api-details-panel__section .section-text {
        font-size: 0.7rem;
    }

    .param-list li {
        font-size: 0.6rem;
    }

    .code-list li {
        font-size: 0.6rem;
    }

    .sdks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 10px;
    }

    .api-docs__quick-actions {
        margin-bottom: 32px;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action-btn {
        padding: 12px 8px;
    }

    .api-docs__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .api-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .api-metric__number {
        font-size: 1.6rem;
    }
    .api-metric__number .stat-suffix {
        font-size: 1.2rem;
    }
    .api-metric__number .stat-label--version {
        font-size: 1.4rem;
    }
    .api-metric__label {
        font-size: 0.72rem;
    }

    .btn-view-api {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .api-docs__orb--1,
    .api-docs__orb--2 {
        display: none;
    }

    .api-docs__shape--2 {
        display: none;
    }

    #api-docs .particle--3,
    #api-docs .particle--5,
    #api-docs .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #api-docs {
        padding: 40px 0 40px;
    }

    .api-docs__header {
        margin-bottom: 28px;
    }

    .api-docs__title {
        font-size: 1.8rem;
    }

    .api-docs__subtitle {
        font-size: 0.88rem;
    }

    .api-featured {
        padding: 18px 16px 22px;
        border-radius: 16px;
        gap: 16px;
    }

    .api-featured__icon {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        border-radius: 14px;
    }

    .api-featured__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .api-featured__title {
        font-size: 1.05rem;
    }

    .api-featured__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px 8px;
    }

    .info-item {
        font-size: 0.7rem;
    }

    .api-featured__description {
        font-size: 0.8rem;
    }

    .btn-api-featured {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .api-docs__workspace {
        gap: 16px;
        margin-bottom: 28px;
    }

    .api-workspace__sidebar {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .api-sidebar__categories {
        grid-template-columns: 1fr 1fr;
        gap: 2px 8px;
    }

    .api-category__toggle {
        font-size: 0.65rem;
        padding: 3px 4px;
    }

    .api-category__icon {
        font-size: 0.65rem;
    }

    .api-endpoints {
        padding-left: 16px;
    }

    .api-endpoint-link {
        font-size: 0.55rem;
        padding: 2px 6px;
    }

    .api-workspace__endpoints {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .endpoint-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .endpoint-item__header {
        padding: 6px 10px;
        gap: 4px;
    }

    .endpoint-method {
        font-size: 0.5rem;
        padding: 1px 6px;
    }

    .endpoint-url {
        font-size: 0.62rem;
        word-break: break-all;
    }

    .endpoint-status {
        font-size: 0.4rem;
        padding: 1px 6px;
    }

    .endpoint-toggle {
        font-size: 0.6rem;
    }

    .endpoint-description {
        font-size: 0.72rem;
    }

    .endpoint-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 6px 10px;
    }

    .endpoint-meta span {
        font-size: 0.6rem;
    }

    .endpoint-item.active .endpoint-item__body {
        padding: 0 10px 10px;
    }

    .detail-section {
        padding: 6px 8px;
    }

    .detail-section__title {
        font-size: 0.55rem;
    }

    .detail-section code {
        font-size: 0.6rem;
    }

    .endpoint-actions {
        flex-direction: column;
        gap: 6px;
    }

    .btn-copy,
    .btn-try {
        width: 100%;
        justify-content: center;
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .api-details-panel {
        grid-template-columns: 1fr 1fr;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .api-details-panel__title {
        grid-column: span 2;
    }

    .api-details-panel__method {
        grid-column: span 1;
    }

    .api-details-panel__status {
        grid-column: span 1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .api-details-panel__section {
        grid-column: span 2;
    }

    .sdks-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .sdk-card {
        padding: 6px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .sdk-card__icon {
        font-size: 1rem;
    }

    .sdk-card__name {
        font-size: 0.62rem;
    }

    .sdk-card__version {
        font-size: 0.42rem;
    }

    .sdk-btn {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }

    .api-docs__quick-actions {
        margin-bottom: 24px;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .quick-action-btn {
        padding: 10px 6px;
        border-radius: 12px;
    }

    .quick-action-btn__icon {
        font-size: 1rem;
    }

    .quick-action-btn__label {
        font-size: 0.55rem;
    }

    .api-docs__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .api-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
    }

    .api-metric__number {
        font-size: 1.3rem;
    }
    .api-metric__number .stat-suffix {
        font-size: 1rem;
    }
    .api-metric__number .stat-label--version {
        font-size: 1.1rem;
    }
    .api-metric__label {
        font-size: 0.62rem;
    }

    .btn-view-api {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .api-docs__bg .api-docs__shape {
        display: none;
    }

    #api-docs .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #api-docs {
        padding: 32px 0 32px;
    }

    .api-docs__title {
        font-size: 1.5rem;
    }

    .api-docs__subtitle {
        font-size: 0.8rem;
    }

    .api-sidebar__categories {
        grid-template-columns: 1fr;
    }

    .api-details-panel {
        grid-template-columns: 1fr;
    }

    .api-details-panel__title {
        grid-column: span 1;
    }

    .api-details-panel__method {
        grid-column: span 1;
    }

    .api-details-panel__status {
        grid-column: span 1;
    }

    .api-details-panel__section {
        grid-column: span 1;
    }

    .sdks-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .sdk-card {
        padding: 4px 8px;
    }

    .sdk-card__name {
        font-size: 0.55rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .quick-action-btn {
        padding: 8px 4px;
    }

    .quick-action-btn__icon {
        font-size: 0.85rem;
    }

    .quick-action-btn__label {
        font-size: 0.5rem;
    }

    .api-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 320px;
    }

    .api-metric__number {
        font-size: 1.1rem;
    }
    .api-metric__number .stat-suffix {
        font-size: 0.85rem;
    }
    .api-metric__number .stat-label--version {
        font-size: 0.95rem;
    }
    .api-metric__label {
        font-size: 0.55rem;
    }

    .btn-view-api {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #api-docs {
        padding: 24px 0 24px;
    }

    .api-docs__title {
        font-size: 1.3rem;
    }

    .api-docs__subtitle {
        font-size: 0.72rem;
    }

    .sdks-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sdk-card {
        padding: 4px 6px;
    }

    .api-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        max-width: 280px;
    }

    .api-metric__number {
        font-size: 0.95rem;
    }
    .api-metric__number .stat-suffix {
        font-size: 0.7rem;
    }
    .api-metric__number .stat-label--version {
        font-size: 0.8rem;
    }
    .api-metric__label {
        font-size: 0.48rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .quick-action-btn {
        padding: 6px 2px;
    }

    .quick-action-btn__icon {
        font-size: 0.7rem;
    }

    .quick-action-btn__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: API Documentation Center & Interactive Endpoint Explorer Responsive
================================================== */

/* ==================================================
START: Code Examples, Interactive Snippets & Developer Playground Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #code-playground {
        padding: 60px 0 60px;
    }

    .code-playground__header {
        margin-bottom: 36px;
    }

    .code-playground__title {
        font-size: 2.2rem;
    }

    .code-playground__subtitle {
        font-size: 0.95rem;
    }

    .featured-example {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 24px 28px;
        border-radius: 20px;
    }

    .featured-example__icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .featured-example__title {
        font-size: 1.05rem;
    }

    .featured-example__description {
        font-size: 0.82rem;
    }

    .btn-featured-example {
        width: 100%;
        justify-content: center;
    }

    .code-workspace {
        border-radius: 16px;
    }

    .code-workspace__header {
        padding: 10px 14px;
        gap: 8px;
    }

    .workspace-file {
        font-size: 0.65rem;
    }

    .workspace-actions {
        gap: 2px;
    }

    .workspace-btn {
        font-size: 0.58rem;
        padding: 3px 8px;
    }

    .workspace-btn span {
        display: none;
    }

    .code-container {
        padding: 12px 16px;
    }

    .code-block {
        font-size: 0.7rem;
    }

    .code-block code {
        font-size: 0.7rem;
    }

    .code-workspace__body {
        max-height: 420px;
    }

    .sdk-examples-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .sdk-example {
        padding: 8px 12px;
    }

    .sdk-example__name {
        font-size: 0.72rem;
    }

    .sdk-example__desc {
        font-size: 0.58rem;
    }

    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 10px;
    }

    .resource-card {
        padding: 6px 10px;
    }

    .resource-card__label {
        font-size: 0.62rem;
    }

    .code-playground__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .code-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .code-metric__number {
        font-size: 1.6rem;
    }
    .code-metric__number .stat-suffix {
        font-size: 1.2rem;
    }
    .code-metric__number .stat-label--weekly {
        font-size: 1.2rem;
    }
    .code-metric__label {
        font-size: 0.72rem;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action-btn {
        padding: 12px 8px;
    }

    .btn-view-examples {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .code-playground__orb--1,
    .code-playground__orb--2 {
        display: none;
    }

    .code-playground__shape--2 {
        display: none;
    }

    #code-playground .particle--3,
    #code-playground .particle--5,
    #code-playground .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #code-playground {
        padding: 40px 0 40px;
    }

    .code-playground__header {
        margin-bottom: 28px;
    }

    .code-playground__title {
        font-size: 1.8rem;
    }

    .code-playground__subtitle {
        font-size: 0.88rem;
    }

    .featured-example {
        padding: 18px 16px 22px;
        border-radius: 16px;
        gap: 12px;
    }

    .featured-example__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .featured-example__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .featured-example__title {
        font-size: 0.95rem;
    }

    .featured-example__description {
        font-size: 0.78rem;
    }

    .featured-example__meta {
        gap: 8px 12px;
    }

    .featured-example__meta span {
        font-size: 0.65rem;
    }

    .btn-featured-example {
        font-size: 0.75rem;
        padding: 8px 18px;
    }

    .code-playground__tabs {
        margin-bottom: 16px;
    }

    .lang-tab {
        font-size: 0.7rem;
        padding: 4px 14px;
    }

    .code-workspace {
        border-radius: 14px;
    }

    .code-workspace__header {
        padding: 8px 12px;
        gap: 6px;
    }

    .workspace-dots .dot {
        width: 8px;
        height: 8px;
    }

    .workspace-file {
        font-size: 0.6rem;
    }

    .workspace-lang {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .workspace-btn {
        font-size: 0.5rem;
        padding: 2px 6px;
    }

    .workspace-btn i {
        font-size: 0.6rem;
    }

    .code-container {
        padding: 10px 12px;
    }

    .code-block {
        font-size: 0.6rem;
        line-height: 1.6;
    }

    .code-block code {
        font-size: 0.6rem;
        line-height: 1.6;
    }

    .code-workspace__body {
        max-height: 340px;
    }

    .code-workspace__footer {
        padding: 6px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .workspace-status {
        font-size: 0.55rem;
    }

    .workspace-lines,
    .workspace-characters {
        font-size: 0.5rem;
    }

    .code-playground__sdks {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .sdks-header {
        flex-wrap: wrap;
    }

    .sdks-header__count {
        margin-left: 0;
    }

    .sdk-examples-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sdk-example {
        padding: 6px 10px;
        border-radius: 10px;
    }

    .sdk-example__icon {
        font-size: 1rem;
    }

    .sdk-example__name {
        font-size: 0.68rem;
    }

    .sdk-example__desc {
        font-size: 0.55rem;
    }

    .sdk-example__link {
        font-size: 0.6rem;
    }

    .code-playground__resources {
        padding: 16px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .resource-card {
        padding: 4px 8px;
        border-radius: 8px;
        gap: 6px;
    }

    .resource-card__icon {
        font-size: 0.65rem;
    }

    .resource-card__label {
        font-size: 0.55rem;
    }

    .code-playground__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .code-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
    }

    .code-metric__number {
        font-size: 1.3rem;
    }
    .code-metric__number .stat-suffix {
        font-size: 1rem;
    }
    .code-metric__number .stat-label--weekly {
        font-size: 1rem;
    }
    .code-metric__label {
        font-size: 0.62rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .quick-action-btn {
        padding: 10px 6px;
        border-radius: 12px;
    }

    .quick-action-btn__icon {
        font-size: 1rem;
    }

    .quick-action-btn__label {
        font-size: 0.55rem;
    }

    .btn-view-examples {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .code-playground__bg .code-playground__shape {
        display: none;
    }

    #code-playground .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #code-playground {
        padding: 32px 0 32px;
    }

    .code-playground__title {
        font-size: 1.5rem;
    }

    .code-playground__subtitle {
        font-size: 0.8rem;
    }

    .featured-example__title {
        font-size: 0.85rem;
    }

    .featured-example__description {
        font-size: 0.72rem;
    }

    .code-workspace__body {
        max-height: 280px;
    }

    .code-block {
        font-size: 0.55rem;
    }

    .code-block code {
        font-size: 0.55rem;
    }

    .resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .resource-card__label {
        font-size: 0.5rem;
    }

    .code-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 320px;
    }

    .code-metric__number {
        font-size: 1.1rem;
    }
    .code-metric__number .stat-suffix {
        font-size: 0.85rem;
    }
    .code-metric__number .stat-label--weekly {
        font-size: 0.85rem;
    }
    .code-metric__label {
        font-size: 0.55rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .quick-action-btn {
        padding: 8px 4px;
    }

    .quick-action-btn__icon {
        font-size: 0.85rem;
    }

    .quick-action-btn__label {
        font-size: 0.5rem;
    }

    .btn-view-examples {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .sdk-example__name {
        font-size: 0.62rem;
    }

    .sdk-example__desc {
        font-size: 0.5rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #code-playground {
        padding: 24px 0 24px;
    }

    .code-playground__title {
        font-size: 1.3rem;
    }

    .code-playground__subtitle {
        font-size: 0.72rem;
    }

    .code-workspace__body {
        max-height: 220px;
    }

    .code-block {
        font-size: 0.5rem;
    }

    .code-block code {
        font-size: 0.5rem;
    }

    .resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px 4px;
    }

    .resource-card__label {
        font-size: 0.45rem;
    }

    .code-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        max-width: 280px;
    }

    .code-metric__number {
        font-size: 0.95rem;
    }
    .code-metric__number .stat-suffix {
        font-size: 0.7rem;
    }
    .code-metric__number .stat-label--weekly {
        font-size: 0.7rem;
    }
    .code-metric__label {
        font-size: 0.48rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .quick-action-btn {
        padding: 6px 2px;
    }

    .quick-action-btn__icon {
        font-size: 0.7rem;
    }

    .quick-action-btn__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Code Examples, Interactive Snippets & Developer Playground Responsive
================================================== */

/* ==================================================
START: Downloads Center, SDK Library & Developer Resources Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #downloads-center {
        padding: 60px 0 60px;
    }

    .downloads-center__header {
        margin-bottom: 36px;
    }

    .downloads-center__title {
        font-size: 2.2rem;
    }

    .downloads-center__subtitle {
        font-size: 0.95rem;
    }

    .featured-resource {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 20px;
    }

    .featured-resource__image {
        min-height: 200px;
    }

    .featured-resource__placeholder .placeholder-content i {
        font-size: 2.6rem;
    }

    .featured-resource__content {
        padding: 24px 24px 28px;
    }

    .featured-resource__title {
        font-size: 1.2rem;
    }

    .featured-resource__description {
        font-size: 0.85rem;
    }

    .btn-download-featured,
    .btn-docs-featured {
        width: 100%;
        justify-content: center;
    }

    .downloads-center__sdks {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .sdks-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .sdk-card {
        padding: 10px 12px;
    }

    .sdk-card__name {
        font-size: 0.75rem;
    }

    .sdk-card__meta {
        font-size: 0.55rem;
    }

    .sdk-btn {
        width: 26px;
        height: 26px;
        font-size: 0.5rem;
    }

    .downloads-center__library {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .library-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }

    .library-item {
        padding: 8px 12px;
    }

    .library-item__name {
        font-size: 0.72rem;
    }

    .library-item__meta {
        font-size: 0.55rem;
    }

    .downloads-center__toolkit {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .toolkit-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 10px;
    }

    .toolkit-item {
        padding: 6px 12px;
    }

    .toolkit-item__label {
        font-size: 0.65rem;
    }

    .downloads-center__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .metric-stat__number {
        font-size: 1.6rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 1.2rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 1.2rem;
    }
    .metric-stat__label {
        font-size: 0.72rem;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action-btn {
        padding: 12px 8px;
    }

    .btn-view-resources {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .downloads-center__orb--1,
    .downloads-center__orb--2 {
        display: none;
    }

    .downloads-center__shape--2 {
        display: none;
    }

    #downloads-center .particle--3,
    #downloads-center .particle--5,
    #downloads-center .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #downloads-center {
        padding: 40px 0 40px;
    }

    .downloads-center__header {
        margin-bottom: 28px;
    }

    .downloads-center__title {
        font-size: 1.8rem;
    }

    .downloads-center__subtitle {
        font-size: 0.88rem;
    }

    .featured-resource__image {
        min-height: 160px;
    }

    .featured-resource__placeholder .placeholder-content i {
        font-size: 2rem;
    }

    .featured-resource__placeholder .placeholder-content span {
        font-size: 0.8rem;
    }

    .featured-resource__content {
        padding: 18px 16px 22px;
    }

    .featured-resource__title {
        font-size: 1.05rem;
    }

    .featured-resource__meta {
        gap: 4px 10px;
    }

    .meta-item {
        font-size: 0.65rem;
    }

    .featured-resource__description {
        font-size: 0.8rem;
    }

    .btn-download-featured,
    .btn-docs-featured {
        font-size: 0.78rem;
        padding: 8px 20px;
    }

    .downloads-center__sdks {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .sdks-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sdk-card {
        padding: 8px 12px;
        border-radius: 10px;
    }

    .sdk-card__icon {
        font-size: 1.2rem;
        width: 30px;
    }

    .sdk-card__name {
        font-size: 0.72rem;
    }

    .sdk-card__meta {
        font-size: 0.5rem;
    }

    .downloads-center__library {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .library-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .library-item {
        padding: 6px 10px;
        border-radius: 8px;
    }

    .library-item__icon {
        font-size: 0.9rem;
        width: 24px;
    }

    .library-item__name {
        font-size: 0.68rem;
    }

    .library-item__meta {
        font-size: 0.5rem;
    }

    .library-item__btn {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .downloads-center__toolkit {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .toolkit-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .toolkit-item {
        padding: 4px 10px;
        border-radius: 8px;
    }

    .toolkit-item__icon {
        font-size: 0.8rem;
    }

    .toolkit-item__label {
        font-size: 0.58rem;
    }

    .downloads-center__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
    }

    .metric-stat__number {
        font-size: 1.3rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 1rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 1rem;
    }
    .metric-stat__label {
        font-size: 0.62rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .quick-action-btn {
        padding: 10px 6px;
        border-radius: 12px;
    }

    .quick-action-btn__icon {
        font-size: 1rem;
    }

    .quick-action-btn__label {
        font-size: 0.55rem;
    }

    .btn-view-resources {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .downloads-center__bg .downloads-center__shape {
        display: none;
    }

    #downloads-center .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #downloads-center {
        padding: 32px 0 32px;
    }

    .downloads-center__title {
        font-size: 1.5rem;
    }

    .downloads-center__subtitle {
        font-size: 0.8rem;
    }

    .featured-resource__title {
        font-size: 0.95rem;
    }

    .sdks-grid {
        gap: 4px;
    }

    .sdk-card {
        padding: 6px 10px;
    }

    .sdk-card__icon {
        font-size: 1rem;
        width: 26px;
    }

    .sdk-card__name {
        font-size: 0.65rem;
    }

    .library-item {
        padding: 4px 8px;
    }

    .library-item__name {
        font-size: 0.62rem;
    }

    .library-item__meta {
        font-size: 0.45rem;
    }

    .toolkit-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .toolkit-item {
        padding: 4px 8px;
    }

    .toolkit-item__label {
        font-size: 0.52rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 320px;
    }

    .metric-stat__number {
        font-size: 1.1rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 0.85rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 0.85rem;
    }
    .metric-stat__label {
        font-size: 0.55rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .quick-action-btn {
        padding: 8px 4px;
    }

    .quick-action-btn__icon {
        font-size: 0.85rem;
    }

    .quick-action-btn__label {
        font-size: 0.5rem;
    }

    .btn-view-resources {
        font-size: 0.78rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #downloads-center {
        padding: 24px 0 24px;
    }

    .downloads-center__title {
        font-size: 1.3rem;
    }

    .downloads-center__subtitle {
        font-size: 0.72rem;
    }

    .sdk-card__name {
        font-size: 0.58rem;
    }

    .library-item__name {
        font-size: 0.55rem;
    }

    .toolkit-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px 4px;
    }

    .toolkit-item {
        padding: 2px 6px;
    }

    .toolkit-item__label {
        font-size: 0.45rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        max-width: 280px;
    }

    .metric-stat__number {
        font-size: 0.95rem;
    }
    .metric-stat__number .stat-suffix {
        font-size: 0.7rem;
    }
    .metric-stat__number .stat-label--weekly {
        font-size: 0.7rem;
    }
    .metric-stat__label {
        font-size: 0.48rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .quick-action-btn {
        padding: 6px 2px;
    }

    .quick-action-btn__icon {
        font-size: 0.7rem;
    }

    .quick-action-btn__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Downloads Center, SDK Library & Developer Resources Responsive
================================================== */

/* ==================================================
START: Developer FAQ, Troubleshooting & Support Hub Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #support-hub {
        padding: 60px 0 60px;
    }

    .support-hub__header {
        margin-bottom: 36px;
    }

    .support-hub__title {
        font-size: 2.2rem;
    }

    .support-hub__subtitle {
        font-size: 0.95rem;
    }

    .support-hub__search {
        margin-bottom: 36px;
    }

    .support-search {
        padding: 16px 18px 14px;
    }

    .support-search__input {
        font-size: 0.88rem;
    }

    .support-search__btn {
        padding: 8px 18px;
        font-size: 0.8rem;
    }

    .support-hub__faq {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .faq-item__trigger {
        padding: 12px 16px;
        font-size: 0.8rem;
        grid-template-columns: auto 1fr auto;
    }

    .faq-item__category {
        font-size: 0.55rem;
    }

    .faq-item__question {
        font-size: 0.8rem;
    }

    .faq-item__content {
        font-size: 0.82rem;
    }

    .support-hub__troubleshooting {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .troubleshooting-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .trouble-card {
        padding: 10px 14px;
        grid-template-columns: auto 1fr auto auto;
        gap: 8px;
    }

    .support-hub__diagnostics {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .diagnostics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .support-hub__options {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .support-options-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .support-hub__community {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .community-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .support-hub__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .support-hub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .support-hub__metrics .metric-stat__number {
        font-size: 1.6rem;
    }
    .support-hub__metrics .metric-stat__number .stat-suffix {
        font-size: 1.2rem;
    }

    .btn-visit-help-center {
        padding: 12px 28px;
        font-size: 0.88rem;
    }

    .support-hub__orb--1,
    .support-hub__orb--2 {
        display: none;
    }

    .support-hub__shape--2 {
        display: none;
    }

    #support-hub .particle--3,
    #support-hub .particle--5,
    #support-hub .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #support-hub {
        padding: 40px 0 40px;
    }

    .support-hub__header {
        margin-bottom: 28px;
    }

    .support-hub__title {
        font-size: 1.8rem;
    }

    .support-hub__subtitle {
        font-size: 0.88rem;
    }

    .support-search {
        padding: 12px 14px 12px;
        border-radius: 18px;
    }

    .support-search__wrapper {
        flex-wrap: wrap;
        border-radius: 12px;
    }

    .support-search__icon {
        padding: 0 12px;
        font-size: 0.85rem;
    }

    .support-search__input {
        padding: 10px 0;
        font-size: 0.82rem;
        width: calc(100% - 40px);
    }

    .support-search__btn {
        width: 100%;
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.78rem;
        margin: 2px 4px 4px;
        border-radius: 10px;
    }

    .support-search__recent {
        gap: 4px 8px;
    }

    .support-search__recent-tag {
        font-size: 0.6rem;
        padding: 1px 8px;
    }

    .support-hub__faq {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .faq-item__trigger {
        padding: 10px 12px;
        font-size: 0.75rem;
        gap: 8px;
        grid-template-columns: 1fr auto;
    }

    .faq-item__category {
        font-size: 0.5rem;
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }

    .faq-item__question {
        font-size: 0.75rem;
        grid-column: 1 / -1;
    }

    .faq-item__icon {
        grid-column: 2;
        grid-row: 1;
    }

    .faq-item__content {
        font-size: 0.78rem;
        padding: 0 12px;
    }

    .faq-item__trigger[aria-expanded="true"] + .faq-item__content {
        padding: 0 12px 14px;
    }

    .support-hub__troubleshooting {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .troubleshooting-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .trouble-card {
        padding: 8px 12px;
        grid-template-columns: auto 1fr auto;
        gap: 6px 10px;
    }

    .trouble-card__desc {
        display: none;
    }

    .trouble-card__severity {
        font-size: 0.5rem;
        padding: 1px 8px;
        grid-column: 3;
    }

    .trouble-card__btn {
        font-size: 0.6rem;
        padding: 2px 10px;
        grid-column: 1 / -1;
        text-align: center;
    }

    .support-hub__diagnostics {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .diagnostics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .diagnostic-card {
        padding: 10px 12px;
    }

    .diagnostic-card__name {
        font-size: 0.7rem;
    }
    .diagnostic-card__status {
        font-size: 0.58rem;
    }

    .support-hub__options {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .support-options-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .support-option {
        padding: 8px 12px;
    }

    .support-option__name {
        font-size: 0.7rem;
    }
    .support-option__desc {
        font-size: 0.55rem;
    }
    .support-option__btn {
        font-size: 0.6rem;
        padding: 2px 10px;
    }

    .support-hub__community {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .community-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .community-item {
        padding: 6px 10px;
    }

    .community-item__icon {
        font-size: 0.8rem;
    }

    .community-item__label {
        font-size: 0.6rem;
    }

    .support-hub__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .support-hub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
    }

    .support-hub__metrics .metric-stat__number {
        font-size: 1.3rem;
    }
    .support-hub__metrics .metric-stat__number .stat-suffix {
        font-size: 1rem;
    }
    .support-hub__metrics .metric-stat__label {
        font-size: 0.62rem;
    }

    .btn-visit-help-center {
        padding: 10px 24px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }

    .support-hub__bg .support-hub__shape {
        display: none;
    }

    #support-hub .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #support-hub {
        padding: 32px 0 32px;
    }

    .support-hub__title {
        font-size: 1.5rem;
    }

    .support-hub__subtitle {
        font-size: 0.8rem;
    }

    .support-search__input {
        font-size: 0.75rem;
    }

    .support-options-grid {
        grid-template-columns: 1fr;
    }

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

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

    .support-hub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 320px;
    }

    .support-hub__metrics .metric-stat__number {
        font-size: 1.1rem;
    }
    .support-hub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.85rem;
    }
    .support-hub__metrics .metric-stat__label {
        font-size: 0.55rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #support-hub {
        padding: 24px 0 24px;
    }

    .support-hub__title {
        font-size: 1.3rem;
    }

    .support-hub__subtitle {
        font-size: 0.72rem;
    }

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

    .support-hub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .support-hub__metrics .metric-stat__number {
        font-size: 0.95rem;
    }
    .support-hub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.7rem;
    }
    .support-hub__metrics .metric-stat__label {
        font-size: 0.48rem;
    }
}

/* ==================================================
END: Developer FAQ, Troubleshooting & Support Hub Responsive
================================================== */

/* ==================================================
START: Documentation CTA & Developer Community Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #dev-community {
        padding: 60px 0 40px;
    }

    .dev-community__header {
        margin-bottom: 36px;
    }

    .dev-community__title {
        font-size: 2.2rem;
    }

    .dev-community__subtitle {
        font-size: 0.95rem;
    }

    .community-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .community-banner__content {
        padding: 30px 28px;
        order: 2;
    }

    .community-banner__visual {
        min-height: 180px;
        order: 1;
    }

    .banner-illustration__code {
        max-width: 180px;
        padding: 14px 20px;
    }

    .banner-illustration__code .code-line {
        font-size: 0.6rem;
    }

    .community-banner__title {
        font-size: 1.3rem;
    }

    .dev-community__benefits {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .dev-community__resources {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .newsletter-card {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .newsletter-card__content {
        padding: 24px 24px 20px;
        order: 2;
    }

    .newsletter-card__visual {
        min-height: 100px;
        order: 1;
        padding: 16px;
    }

    .newsletter-illustration .illustration-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .newsletter-card__title {
        font-size: 1.05rem;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-action-btn {
        padding: 12px 8px;
    }

    .dev-community__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .dev-community__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .dev-community__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .dev-community__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .dev-community__metrics .metric-stat__number .stat-label--growing {
        font-size: 1.1rem;
    }
    .dev-community__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .final-cta {
        padding: 32px 32px;
        grid-template-columns: 1fr;
        gap: 20px;
        border-radius: 22px;
    }

    .final-cta__desc {
        max-width: 100%;
    }

    .final-cta__visual {
        display: none;
    }

    .final-cta__title {
        font-size: 1.3rem;
    }

    .btn-start-project,
    .btn-talk-expert {
        width: 100%;
        justify-content: center;
    }

    .dev-community__orb--1,
    .dev-community__orb--2 {
        display: none;
    }

    .dev-community__shape--2 {
        display: none;
    }

    #dev-community .particle--3,
    #dev-community .particle--5,
    #dev-community .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #dev-community {
        padding: 40px 0 30px;
    }

    .dev-community__header {
        margin-bottom: 28px;
    }

    .dev-community__title {
        font-size: 1.8rem;
    }

    .dev-community__subtitle {
        font-size: 0.88rem;
    }

    .community-banner__content {
        padding: 22px 18px;
    }

    .community-banner__title {
        font-size: 1.1rem;
    }

    .community-banner__desc {
        font-size: 0.82rem;
    }

    .community-banner__highlights {
        gap: 8px 16px;
    }

    .highlight-item {
        font-size: 0.7rem;
    }

    .community-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-join-community,
    .btn-contact-experts {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .banner-illustration__code {
        max-width: 150px;
        padding: 12px 16px;
    }

    .banner-illustration__code .code-line {
        font-size: 0.5rem;
    }

    .dev-community__benefits {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .benefit-card {
        padding: 8px 12px;
    }

    .benefit-card__name {
        font-size: 0.7rem;
    }
    .benefit-card__desc {
        font-size: 0.55rem;
    }

    .dev-community__resources {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .resource-card {
        padding: 8px 12px;
    }

    .resource-card__name {
        font-size: 0.7rem;
    }
    .resource-card__desc {
        font-size: 0.55rem;
    }

    .newsletter-card__content {
        padding: 18px 16px 16px;
    }

    .newsletter-card__title {
        font-size: 0.95rem;
    }

    .newsletter-card__desc {
        font-size: 0.78rem;
    }

    .newsletter-form__wrapper {
        flex-wrap: wrap;
        border-radius: 12px;
    }

    .newsletter-form__icon {
        padding: 0 12px;
        font-size: 0.75rem;
    }

    .newsletter-form__input {
        padding: 10px 0;
        font-size: 0.8rem;
        width: calc(100% - 40px);
    }

    .newsletter-form__btn {
        width: 100%;
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.78rem;
        margin: 2px 4px 4px;
        border-radius: 8px;
    }

    .newsletter-illustration .illustration-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .quick-action-btn {
        padding: 10px 6px;
        border-radius: 12px;
    }

    .quick-action-btn__icon {
        font-size: 1rem;
    }

    .quick-action-btn__label {
        font-size: 0.55rem;
    }

    .dev-community__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .dev-community__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .dev-community__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .dev-community__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .dev-community__metrics .metric-stat__number .stat-label--growing {
        font-size: 0.9rem;
    }
    .dev-community__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .final-cta {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .final-cta__title {
        font-size: 1.1rem;
    }

    .final-cta__desc {
        font-size: 0.82rem;
    }

    .final-cta__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-start-project,
    .btn-talk-expert {
        font-size: 0.82rem;
        padding: 10px 24px;
    }

    .dev-community__bg .dev-community__shape {
        display: none;
    }

    #dev-community .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #dev-community {
        padding: 32px 0 24px;
    }

    .dev-community__title {
        font-size: 1.5rem;
    }

    .dev-community__subtitle {
        font-size: 0.8rem;
    }

    .community-banner__content {
        padding: 18px 14px;
    }

    .community-banner__title {
        font-size: 0.95rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .quick-action-btn {
        padding: 8px 4px;
    }

    .quick-action-btn__icon {
        font-size: 0.85rem;
    }

    .quick-action-btn__label {
        font-size: 0.5rem;
    }

    .dev-community__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 320px;
    }

    .dev-community__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .dev-community__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .dev-community__metrics .metric-stat__number .stat-label--growing {
        font-size: 0.75rem;
    }
    .dev-community__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .final-cta {
        padding: 20px 14px;
    }

    .final-cta__title {
        font-size: 0.95rem;
    }

    .final-cta__desc {
        font-size: 0.75rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    #dev-community {
        padding: 24px 0 20px;
    }

    .dev-community__title {
        font-size: 1.3rem;
    }

    .dev-community__subtitle {
        font-size: 0.72rem;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .quick-action-btn {
        padding: 6px 2px;
    }

    .quick-action-btn__icon {
        font-size: 0.7rem;
    }

    .quick-action-btn__label {
        font-size: 0.45rem;
    }

    .dev-community__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .dev-community__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .dev-community__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .dev-community__metrics .metric-stat__number .stat-label--growing {
        font-size: 0.6rem;
    }
    .dev-community__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Documentation CTA & Developer Community Responsive
================================================== */

/* ==================================================
START: Contact Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #contact-hero {
        padding: 40px 0 60px;
        min-height: auto;
    }

    .contact-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-hero__title {
        font-size: 2.4rem;
    }

    .contact-hero__subtitle {
        max-width: 100%;
    }

    .contact-hero__quick-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .contact-hero__trust {
        gap: 6px 12px;
    }

    .contact-hero__visual {
        min-height: 400px;
        order: -1;
    }

    .hero-illustration {
        height: 400px;
        max-width: 100%;
    }

    .chat-bubble {
        max-width: 130px;
        padding: 8px 12px;
    }

    .chat-bubble .bubble-text {
        font-size: 0.68rem;
    }

    .message-card {
        width: 240px;
        padding: 14px 16px;
    }

    .dashboard-mockup {
        width: 170px;
        padding: 10px 12px;
    }

    .contact-hero__orb--1,
    .contact-hero__orb--2 {
        display: none;
    }

    .contact-hero__shape--2 {
        display: none;
    }

    #contact-hero .particle--3,
    #contact-hero .particle--5,
    #contact-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #contact-hero {
        padding: 30px 0 40px;
    }

    .contact-hero__title {
        font-size: 1.8rem;
    }

    .contact-hero__subtitle {
        font-size: 0.9rem;
    }

    .contact-hero__actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-start-project,
    .btn-book-consultation {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .contact-hero__quick-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .quick-card {
        padding: 12px 14px;
        align-items: center;
    }

    .quick-card__icon {
        font-size: 1.2rem;
    }

    .quick-card__value {
        font-size: 0.8rem;
    }

    .quick-card__note {
        font-size: 0.65rem;
    }

    .contact-hero__trust {
        gap: 4px 8px;
    }

    .trust-badge {
        font-size: 0.65rem;
        padding: 3px 10px 3px 8px;
    }

    .contact-hero__visual {
        min-height: 320px;
    }

    .hero-illustration {
        height: 320px;
    }

    .chat-bubble {
        max-width: 100px;
        padding: 6px 10px;
    }

    .chat-bubble .bubble-text {
        font-size: 0.6rem;
    }

    .chat-bubble .bubble-time {
        font-size: 0.5rem;
    }

    .message-card {
        width: 200px;
        padding: 12px 14px;
    }

    .message-card__avatar {
        font-size: 1.2rem;
    }

    .message-card__name {
        font-size: 0.7rem;
    }

    .message-card__body p {
        font-size: 0.7rem;
    }

    .message-card__reply {
        font-size: 0.6rem;
    }

    .dashboard-mockup {
        width: 140px;
        padding: 8px 10px;
        bottom: 2%;
    }

    .dashboard-mockup__title {
        font-size: 0.5rem;
    }

    .metric {
        font-size: 0.6rem;
    }

    .dashboard-mockup__status {
        font-size: 0.5rem;
    }

    .connection-lines {
        display: none;
    }

    .orb {
        display: none;
    }

    #contact-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    #contact-hero {
        padding: 20px 0 30px;
    }

    .contact-hero__title {
        font-size: 1.5rem;
    }

    .contact-hero__subtitle {
        font-size: 0.8rem;
    }

    .contact-hero__visual {
        min-height: 260px;
    }

    .hero-illustration {
        height: 260px;
    }

    .chat-bubble {
        max-width: 80px;
        padding: 4px 8px;
    }

    .chat-bubble .bubble-text {
        font-size: 0.5rem;
    }

    .message-card {
        width: 170px;
        padding: 10px 12px;
    }

    .message-card__avatar {
        font-size: 1rem;
    }

    .message-card__name {
        font-size: 0.6rem;
    }

    .message-card__body p {
        font-size: 0.65rem;
    }

    .dashboard-mockup {
        width: 120px;
        padding: 6px 8px;
    }

    .dashboard-mockup__title {
        font-size: 0.45rem;
    }

    .metric {
        font-size: 0.5rem;
    }

    .trust-badge {
        font-size: 0.6rem;
        padding: 2px 8px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .contact-hero__title {
        font-size: 1.3rem;
    }

    .contact-hero__visual {
        min-height: 220px;
    }

    .hero-illustration {
        height: 220px;
    }

    .message-card {
        width: 150px;
        padding: 8px 10px;
    }

    .dashboard-mockup {
        width: 100px;
        padding: 4px 6px;
    }

    .metric {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Contact Hero Banner Responsive
================================================== */

/* ==================================================
START: Multiple Contact Options & Communication Channels Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #contact-channels {
        padding: 60px 0 40px;
    }

    .contact-channels__header {
        margin-bottom: 36px;
    }

    .contact-channels__title {
        font-size: 2.2rem;
    }

    .contact-channels__subtitle {
        font-size: 0.95rem;
    }

    .featured-contact {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .featured-contact__content {
        padding: 28px 24px;
        order: 2;
    }

    .featured-contact__visual {
        min-height: 160px;
        order: 1;
        padding: 20px;
    }

    .featured-illustration {
        width: 120px;
        height: 120px;
    }

    .fi-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .fi-ring--1 { width: 100px; height: 100px; }
    .fi-ring--2 { width: 130px; height: 130px; }
    .fi-ring--3 { width: 160px; height: 160px; }

    .featured-contact__title {
        font-size: 1.3rem;
    }

    .contact-channels__grid {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .channels-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .channel-card {
        padding: 12px 14px;
        grid-template-columns: auto 1fr auto;
        gap: 6px 10px;
    }

    .contact-channels__inquiries {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .inquiries-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px 12px;
    }

    .info-panel {
        padding: 24px 24px;
        border-radius: 20px;
    }

    .info-panel__grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
    }

    .contact-channels__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
    }

    .contact-channels__metrics .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 500px;
        margin: 0 auto;
    }

    .contact-channels__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-label--hours,
    .contact-channels__metrics .metric-stat__number .stat-label--global,
    .contact-channels__metrics .metric-stat__number .stat-label--stars {
        font-size: 1.3rem;
    }
    .contact-channels__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .contact-channels__orb--1,
    .contact-channels__orb--2 {
        display: none;
    }

    .contact-channels__shape--2 {
        display: none;
    }

    #contact-channels .particle--3,
    #contact-channels .particle--5,
    #contact-channels .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #contact-channels {
        padding: 40px 0 30px;
    }

    .contact-channels__header {
        margin-bottom: 28px;
    }

    .contact-channels__title {
        font-size: 1.8rem;
    }

    .contact-channels__subtitle {
        font-size: 0.88rem;
    }

    .featured-contact__content {
        padding: 20px 16px;
    }

    .featured-contact__title {
        font-size: 1.1rem;
    }

    .featured-contact__desc {
        font-size: 0.82rem;
    }

    .featured-contact__details {
        flex-direction: column;
        gap: 8px;
    }

    .featured-contact__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-whatsapp,
    .btn-email-featured {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .featured-illustration {
        width: 100px;
        height: 100px;
    }

    .fi-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .fi-ring--1 { width: 80px; height: 80px; }
    .fi-ring--2 { width: 110px; height: 110px; }
    .fi-ring--3 { width: 140px; height: 140px; }

    .contact-channels__grid {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .channels-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .channel-card {
        padding: 10px 12px;
        grid-template-columns: auto 1fr auto;
        gap: 4px 8px;
    }

    .channel-card__icon {
        font-size: 1.1rem;
        grid-row: 1 / 4;
    }

    .channel-card__name {
        font-size: 0.75rem;
    }
    .channel-card__value {
        font-size: 0.68rem;
    }
    .channel-card__tags .tag {
        font-size: 0.5rem;
        padding: 1px 6px;
    }
    .channel-card__btn {
        font-size: 0.6rem;
        padding: 2px 10px;
    }
    .channel-card__availability {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .contact-channels__inquiries {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .inquiries-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .inquiry-card {
        padding: 10px 8px 8px;
    }

    .inquiry-card__icon {
        font-size: 1.1rem;
    }
    .inquiry-card__name {
        font-size: 0.68rem;
    }
    .inquiry-card__desc {
        font-size: 0.55rem;
    }
    .inquiry-card__btn {
        font-size: 0.55rem;
        padding: 1px 10px;
    }

    .info-panel {
        padding: 18px 16px;
        border-radius: 18px;
    }

    .info-panel__title {
        font-size: 1rem;
    }
    .info-panel__desc {
        font-size: 0.8rem;
    }

    .info-panel__grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-item {
        padding: 6px 0;
    }

    .info-item__value {
        font-size: 0.75rem;
    }

    .contact-channels__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
    }

    .contact-channels__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
    }

    .contact-channels__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-label--hours,
    .contact-channels__metrics .metric-stat__number .stat-label--global,
    .contact-channels__metrics .metric-stat__number .stat-label--stars {
        font-size: 1rem;
    }
    .contact-channels__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    #contact-channels .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .contact-channels__title {
        font-size: 1.5rem;
    }

    .contact-channels__subtitle {
        font-size: 0.8rem;
    }

    .inquiries-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .inquiry-card {
        padding: 6px 4px 6px;
    }

    .inquiry-card__name {
        font-size: 0.6rem;
    }
    .inquiry-card__desc {
        font-size: 0.5rem;
    }

    .social-link {
        width: 22px;
        height: 22px;
        font-size: 0.55rem;
    }

    .contact-channels__metrics .metrics-grid {
        max-width: 320px;
    }

    .contact-channels__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-label--hours,
    .contact-channels__metrics .metric-stat__number .stat-label--global,
    .contact-channels__metrics .metric-stat__number .stat-label--stars {
        font-size: 0.85rem;
    }
    .contact-channels__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .btn-whatsapp,
    .btn-email-featured {
        font-size: 0.75rem;
        padding: 6px 16px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .contact-channels__title {
        font-size: 1.3rem;
    }

    .inquiries-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .inquiry-card__name {
        font-size: 0.55rem;
    }
    .inquiry-card__desc {
        font-size: 0.45rem;
    }

    .contact-channels__metrics .metrics-grid {
        max-width: 280px;
    }

    .contact-channels__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .contact-channels__metrics .metric-stat__number .stat-label--hours,
    .contact-channels__metrics .metric-stat__number .stat-label--global,
    .contact-channels__metrics .metric-stat__number .stat-label--stars {
        font-size: 0.7rem;
    }
    .contact-channels__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Multiple Contact Options & Communication Channels Responsive
================================================== */

/* ==================================================
START: Smart Contact Form & Project Inquiry Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #contact-form {
        padding: 60px 0 40px;
    }

    .contact-form__header {
        margin-bottom: 36px;
    }

    .contact-form__title {
        font-size: 2.2rem;
    }

    .contact-form__subtitle {
        font-size: 0.95rem;
    }

    .contact-form__layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .form-container {
        padding: 24px 24px 20px;
        border-radius: 20px;
    }

    .contact-form__info-panel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }

    .info-card {
        padding: 18px 18px 16px;
        border-radius: 16px;
    }

    .info-card__title {
        font-size: 0.95rem;
    }

    .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 2px 8px;
    }

    .step-label {
        font-size: 0.72rem;
    }

    .contact-form__orb--1,
    .contact-form__orb--2 {
        display: none;
    }

    .contact-form__shape--2 {
        display: none;
    }

    #contact-form .particle--3,
    #contact-form .particle--5,
    #contact-form .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #contact-form {
        padding: 40px 0 30px;
    }

    .contact-form__header {
        margin-bottom: 28px;
    }

    .contact-form__title {
        font-size: 1.8rem;
    }

    .contact-form__subtitle {
        font-size: 0.88rem;
    }

    .form-container {
        padding: 16px 14px 16px;
        border-radius: 16px;
    }

    .form-progress {
        margin-bottom: 20px;
        padding-bottom: 14px;
        gap: 10px;
    }

    .form-progress__label {
        font-size: 0.6rem;
        min-width: 60px;
    }

    .form-section__title {
        font-size: 0.95rem;
        margin-bottom: 14px;
    }

    .form-row {
        gap: 10px;
        margin-bottom: 10px;
        flex-direction: column;
    }

    .form-group--half {
        flex: 1 1 100%;
        min-width: 0;
    }

    .form-input,
    .form-select,
    .form-textarea {
        font-size: 0.82rem;
        padding: 8px 12px;
        border-radius: 10px;
    }

    .form-label {
        font-size: 0.72rem;
    }

    .form-radio-group {
        gap: 4px 10px;
    }

    .form-radio-group--inline {
        flex-direction: column;
        gap: 4px;
    }

    .radio-option,
    .checkbox-option {
        font-size: 0.76rem;
    }

    .form-navigation {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-form-next,
    .btn-form-prev {
        padding: 6px 16px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .btn-form-next {
        margin-left: 0;
        flex: 1;
        justify-content: center;
    }

    .btn-form-prev {
        flex: 1;
        justify-content: center;
    }

    .form-submit-area {
        flex-direction: column;
        gap: 10px;
    }

    .btn-submit-form {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.85rem;
        min-width: 0;
    }

    .btn-consult-form {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .contact-form__info-panel {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .info-card {
        padding: 14px 14px 12px;
        border-radius: 14px;
    }

    .info-card__title {
        font-size: 0.88rem;
        margin-bottom: 8px;
    }

    .info-card__list li {
        font-size: 0.78rem;
        padding: 3px 0;
    }

    .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 2px 8px;
    }

    .step-number {
        font-size: 0.6rem;
        min-width: 22px;
        padding: 0 6px;
    }

    .step-label {
        font-size: 0.68rem;
    }

    .file-upload-area {
        padding: 20px 16px;
        min-height: 80px;
    }

    .file-upload-placeholder i {
        font-size: 1.8rem;
    }
    .file-upload-text {
        font-size: 0.78rem;
    }
    .file-upload-hint {
        font-size: 0.62rem;
    }

    .form-review__summary {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .review-item {
        font-size: 0.76rem;
    }

    .form-success__icon {
        font-size: 3rem;
    }

    .form-success__title {
        font-size: 1.3rem;
    }
    .form-success__desc {
        font-size: 0.85rem;
    }

    .form-error-global {
        font-size: 0.78rem;
        padding: 10px 14px;
        flex-wrap: wrap;
    }

    #contact-form .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .contact-form__title {
        font-size: 1.5rem;
    }

    .contact-form__subtitle {
        font-size: 0.8rem;
    }

    .form-container {
        padding: 12px 10px 12px;
        border-radius: 14px;
    }

    .form-progress {
        flex-wrap: wrap;
        gap: 6px;
    }

    .form-progress__label {
        font-size: 0.55rem;
        min-width: 50px;
    }

    .form-section__title {
        font-size: 0.85rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        font-size: 0.76rem;
        padding: 6px 10px;
    }

    .radio-option,
    .checkbox-option {
        font-size: 0.7rem;
    }

    .btn-form-next,
    .btn-form-prev {
        font-size: 0.7rem;
        padding: 5px 12px;
    }

    .btn-submit-form {
        font-size: 0.8rem;
        padding: 8px 16px;
    }
    .btn-consult-form {
        font-size: 0.76rem;
        padding: 8px 16px;
    }

    .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1px 4px;
    }

    .step-label {
        font-size: 0.62rem;
    }

    .info-card__list li {
        font-size: 0.72rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .contact-form__title {
        font-size: 1.3rem;
    }

    .form-container {
        padding: 10px 8px 10px;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .btn-form-next,
    .btn-form-prev {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
}

/* ==================================================
END: Smart Contact Form & Project Inquiry Responsive
================================================== */

/* ==================================================
START: Office Location, Interactive Map & Global Presence Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #office-location {
        padding: 60px 0 40px;
    }

    .office-location__header {
        margin-bottom: 36px;
    }

    .office-location__title {
        font-size: 2.2rem;
    }

    .office-location__subtitle {
        font-size: 0.95rem;
    }

    .office-location__layout {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 36px;
    }

    .office-card {
        padding: 24px 24px 20px;
        border-radius: 20px;
    }

    .office-card__title {
        font-size: 1.2rem;
    }

    .map-container {
        min-height: 320px;
    }

    .map-container__placeholder {
        min-height: 320px;
    }

    .map-placeholder {
        min-height: 320px;
    }

    .office-location__global {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .global-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .office-location__regions {
        padding: 18px 20px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .office-location__highlights {
        padding: 18px 20px 16px;
        border-radius: 16px;
        margin-bottom: 0;
    }

    .highlights-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px 10px;
    }

    .office-location__orb--1,
    .office-location__orb--2 {
        display: none;
    }

    .office-location__shape--2 {
        display: none;
    }

    #office-location .particle--3,
    #office-location .particle--5,
    #office-location .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #office-location {
        padding: 40px 0 30px;
    }

    .office-location__header {
        margin-bottom: 28px;
    }

    .office-location__title {
        font-size: 1.8rem;
    }

    .office-location__subtitle {
        font-size: 0.88rem;
    }

    .office-card {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .office-card__title {
        font-size: 1.05rem;
    }

    .office-card__address {
        padding: 12px 0;
        gap: 10px;
    }

    .office-card__address i {
        font-size: 1.1rem;
    }

    .address-line {
        font-size: 0.82rem;
    }

    .office-card__details {
        gap: 8px;
    }

    .detail-item {
        gap: 10px;
    }

    .detail-item__icon {
        font-size: 0.9rem;
    }

    .detail-item__value {
        font-size: 0.8rem;
    }

    .detail-item__label {
        font-size: 0.58rem;
    }

    .detail-item__note {
        font-size: 0.62rem;
    }

    .office-card__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-directions,
    .btn-schedule-visit {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .map-container {
        min-height: 260px;
        border-radius: 16px;
    }

    .map-container__placeholder {
        min-height: 260px;
    }

    .map-placeholder {
        min-height: 260px;
    }

    .pin-icon {
        font-size: 2.2rem;
    }

    .pin-label {
        font-size: 0.65rem;
        padding: 2px 10px;
    }

    .pin-pulse {
        width: 40px;
        height: 40px;
    }

    .map-controls {
        right: 10px;
    }

    .map-control {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
        border-radius: 6px;
    }

    .map-nearby {
        bottom: 10px;
        padding: 4px 10px;
        gap: 4px;
    }

    .nearby-label {
        font-size: 0.5rem;
    }
    .nearby-tag {
        font-size: 0.55rem;
        padding: 1px 8px;
    }

    .map-embed-placeholder {
        bottom: 44px;
        right: 10px;
    }

    .embed-text {
        font-size: 0.55rem;
    }
    .embed-subtext {
        font-size: 0.45rem;
    }

    .office-location__global {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .global-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .global-card {
        padding: 10px 12px;
    }

    .global-card__icon {
        font-size: 1.1rem;
    }

    .global-card__title {
        font-size: 0.76rem;
    }
    .global-card__desc {
        font-size: 0.6rem;
    }

    .office-location__regions {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .regions-grid {
        gap: 4px 8px;
    }

    .region-badge {
        font-size: 0.7rem;
        padding: 2px 12px;
    }

    .office-location__highlights {
        padding: 14px 14px 12px;
        border-radius: 14px;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .highlight-card {
        padding: 6px 10px;
    }

    .highlight-card__icon {
        font-size: 0.9rem;
    }

    .highlight-card__label {
        font-size: 0.65rem;
    }

    #office-location .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .office-location__title {
        font-size: 1.5rem;
    }

    .office-location__subtitle {
        font-size: 0.8rem;
    }

    .office-card {
        padding: 14px 12px 12px;
    }

    .office-card__title {
        font-size: 0.95rem;
    }

    .address-line {
        font-size: 0.76rem;
    }

    .detail-item__value {
        font-size: 0.74rem;
    }

    .btn-directions,
    .btn-schedule-visit {
        font-size: 0.75rem;
        padding: 6px 16px;
    }

    .map-container {
        min-height: 220px;
    }
    .map-container__placeholder {
        min-height: 220px;
    }
    .map-placeholder {
        min-height: 220px;
    }

    .pin-icon {
        font-size: 1.8rem;
    }

    .pin-label {
        font-size: 0.55rem;
    }

    .map-control {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .highlight-card {
        padding: 4px 8px;
    }

    .highlight-card__label {
        font-size: 0.6rem;
    }

    .region-badge {
        font-size: 0.62rem;
        padding: 2px 10px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .office-location__title {
        font-size: 1.3rem;
    }

    .office-location__layout {
        gap: 16px;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px 4px;
    }

    .highlight-card {
        padding: 3px 6px;
    }

    .highlight-card__label {
        font-size: 0.55rem;
    }

    .region-badge {
        font-size: 0.55rem;
        padding: 1px 8px;
    }

    .global-card__title {
        font-size: 0.68rem;
    }
}

/* ==================================================
END: Office Location, Interactive Map & Global Presence Responsive
================================================== */

/* ==================================================
START: Business Hours, Response Time & Customer Support Availability Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #support-availability {
        padding: 60px 0 40px;
    }

    .support-availability__header {
        margin-bottom: 36px;
    }

    .support-availability__title {
        font-size: 2.2rem;
    }

    .support-availability__subtitle {
        font-size: 0.95rem;
    }

    .hours-card {
        padding: 24px 24px 20px;
        border-radius: 20px;
    }

    .support-availability__response {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .response-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px 12px;
    }

    .support-availability__channels {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .support-availability__channels .channels-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .support-availability__commitments {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .commitments-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 10px;
    }

    .support-availability__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .support-availability__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .support-availability__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .support-availability__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .support-availability__metrics .metric-stat__number .stat-label--hours,
    .support-availability__metrics .metric-stat__number .stat-label--stars,
    .support-availability__metrics .metric-stat__number .stat-label--global {
        font-size: 1.3rem;
    }
    .support-availability__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .support-availability__process {
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .process-timeline {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 8px;
    }

    .process-timeline::before {
        display: none;
    }

    .timeline-step {
        padding: 0 4px;
    }

    .timeline-step__desc {
        font-size: 0.58rem;
    }

    .support-availability__orb--1,
    .support-availability__orb--2 {
        display: none;
    }

    .support-availability__shape--2 {
        display: none;
    }

    #support-availability .particle--3,
    #support-availability .particle--5,
    #support-availability .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #support-availability {
        padding: 40px 0 30px;
    }

    .support-availability__header {
        margin-bottom: 28px;
    }

    .support-availability__title {
        font-size: 1.8rem;
    }

    .support-availability__subtitle {
        font-size: 0.88rem;
    }

    .hours-card {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .hours-card__status {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 6px;
    }

    .status-text {
        font-size: 0.9rem;
    }
    .status-time {
        font-size: 0.78rem;
        margin-left: 0;
        width: 100%;
    }

    .schedule-row {
        font-size: 0.82rem;
        padding: 4px 0;
    }

    .schedule-day {
        font-size: 0.8rem;
    }
    .schedule-time {
        font-size: 0.8rem;
    }

    .hours-card__timezone {
        font-size: 0.7rem;
    }

    .hours-card__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-hours-contact,
    .btn-hours-schedule {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .support-availability__response {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .response-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .response-card {
        padding: 10px 8px 10px;
    }

    .response-card__icon {
        font-size: 1.3rem;
    }
    .response-card__channel {
        font-size: 0.7rem;
    }
    .response-card__time {
        font-size: 0.65rem;
    }
    .response-card__note {
        font-size: 0.55rem;
    }
    .response-card__badge {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .support-availability__channels {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .support-availability__channels .channels-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .channel-support-card {
        padding: 10px 12px;
    }

    .channel-support-card__icon {
        font-size: 1.1rem;
    }
    .channel-support-card__name {
        font-size: 0.76rem;
    }
    .channel-support-card__desc {
        font-size: 0.6rem;
    }
    .channel-support-card__btn {
        font-size: 0.62rem;
        padding: 2px 10px;
    }

    .support-availability__commitments {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .commitments-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .commitment-card {
        padding: 6px 10px;
    }

    .commitment-card__icon {
        font-size: 0.85rem;
    }
    .commitment-card__label {
        font-size: 0.65rem;
    }

    .support-availability__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .support-availability__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .support-availability__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .support-availability__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .support-availability__metrics .metric-stat__number .stat-label--hours,
    .support-availability__metrics .metric-stat__number .stat-label--stars,
    .support-availability__metrics .metric-stat__number .stat-label--global {
        font-size: 1rem;
    }
    .support-availability__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .support-availability__process {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 4px 0;
    }

    .timeline-step {
        flex-direction: row;
        gap: 14px;
        text-align: left;
        padding: 4px 0;
    }

    .timeline-step__number {
        width: 30px;
        height: 30px;
        font-size: 0.6rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .timeline-step__content {
        flex: 1;
    }

    .timeline-step__label {
        font-size: 0.75rem;
    }
    .timeline-step__desc {
        font-size: 0.6rem;
    }

    #support-availability .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .support-availability__title {
        font-size: 1.5rem;
    }

    .support-availability__subtitle {
        font-size: 0.8rem;
    }

    .hours-card__status {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .status-time {
        width: auto;
    }

    .response-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .response-card {
        padding: 8px 6px 8px;
    }
    .response-card__channel {
        font-size: 0.65rem;
    }
    .response-card__time {
        font-size: 0.6rem;
    }

    .commitments-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .commitment-card {
        padding: 4px 8px;
    }
    .commitment-card__label {
        font-size: 0.6rem;
    }

    .support-availability__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 320px;
    }

    .support-availability__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .support-availability__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .support-availability__metrics .metric-stat__number .stat-label--hours,
    .support-availability__metrics .metric-stat__number .stat-label--stars,
    .support-availability__metrics .metric-stat__number .stat-label--global {
        font-size: 0.85rem;
    }
    .support-availability__metrics .metric-stat__label {
        font-size: 0.5rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .support-availability__title {
        font-size: 1.3rem;
    }

    .response-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .commitments-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .support-availability__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .support-availability__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .support-availability__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .support-availability__metrics .metric-stat__number .stat-label--hours,
    .support-availability__metrics .metric-stat__number .stat-label--stars,
    .support-availability__metrics .metric-stat__number .stat-label--global {
        font-size: 0.7rem;
    }
    .support-availability__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Business Hours, Response Time & Customer Support Availability Responsive
================================================== */

/* ==================================================
START: Why Contact XoHub Solutions & Client Success Highlights Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #why-xohub {
        padding: 60px 0 40px;
    }

    .why-xohub__header {
        margin-bottom: 36px;
    }

    .why-xohub__title {
        font-size: 2.2rem;
    }

    .why-xohub__subtitle {
        font-size: 0.95rem;
    }

    .trust-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .trust-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .trust-banner__visual {
        min-height: 140px;
        order: 1;
        padding: 20px;
    }

    .banner-stats {
        max-width: 100%;
        gap: 8px;
    }

    .banner-stat {
        padding: 12px 8px;
    }

    .banner-stat__number {
        font-size: 1.3rem;
    }

    .trust-banner__title {
        font-size: 1.3rem;
    }

    .why-xohub__features {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .why-xohub__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .why-xohub__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .why-xohub__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-xohub__metrics .metric-stat__number .stat-label--global,
    .why-xohub__metrics .metric-stat__number .stat-label--tech {
        font-size: 1.3rem;
    }
    .why-xohub__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .why-xohub__projects {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 12px;
    }

    .why-xohub__timeline {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .timeline-horizontal {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 8px;
    }

    .timeline-horizontal::before {
        display: none;
    }

    .why-xohub__timeline .timeline-step {
        padding: 0 4px;
    }

    .why-xohub__timeline .timeline-step__desc {
        font-size: 0.54rem;
    }

    .why-xohub__trust {
        padding: 18px 18px 16px;
        border-radius: 16px;
    }

    .why-xohub__orb--1,
    .why-xohub__orb--2 {
        display: none;
    }

    .why-xohub__shape--2 {
        display: none;
    }

    #why-xohub .particle--3,
    #why-xohub .particle--5,
    #why-xohub .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #why-xohub {
        padding: 40px 0 30px;
    }

    .why-xohub__header {
        margin-bottom: 28px;
    }

    .why-xohub__title {
        font-size: 1.8rem;
    }

    .why-xohub__subtitle {
        font-size: 0.88rem;
    }

    .trust-banner__content {
        padding: 20px 16px;
    }

    .trust-banner__title {
        font-size: 1.1rem;
    }

    .trust-banner__desc {
        font-size: 0.82rem;
    }

    .trust-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-start,
    .btn-banner-portfolio {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .banner-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .banner-stat {
        padding: 8px 4px;
    }

    .banner-stat__number {
        font-size: 1rem;
    }
    .banner-stat__label {
        font-size: 0.5rem;
    }

    .why-xohub__features {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .feature-card {
        padding: 10px 12px;
    }
    .feature-card__icon {
        font-size: 1.1rem;
    }
    .feature-card__title {
        font-size: 0.76rem;
    }
    .feature-card__desc {
        font-size: 0.62rem;
    }

    .why-xohub__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .why-xohub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .why-xohub__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-xohub__metrics .metric-stat__number .stat-label--global,
    .why-xohub__metrics .metric-stat__number .stat-label--tech {
        font-size: 1rem;
    }
    .why-xohub__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .why-xohub__projects {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .projects-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .project-card__image {
        min-height: 44px;
        padding: 14px 12px 10px;
    }
    .project-card__placeholder {
        font-size: 1.4rem;
    }
    .project-card__category {
        font-size: 0.48rem;
        padding: 0 8px;
    }
    .project-card__info {
        padding: 8px 10px 10px;
    }
    .project-card__title {
        font-size: 0.7rem;
    }
    .project-card__desc {
        font-size: 0.55rem;
    }
    .project-card__btn {
        font-size: 0.55rem;
        padding: 1px 10px;
    }

    .why-xohub__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .timeline-horizontal {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 4px 0;
    }

    .why-xohub__timeline .timeline-step {
        flex-direction: row;
        gap: 14px;
        text-align: left;
        padding: 4px 0;
    }

    .why-xohub__timeline .timeline-step__number {
        width: 30px;
        height: 30px;
        font-size: 0.6rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .why-xohub__timeline .timeline-step__content {
        flex: 1;
    }

    .why-xohub__timeline .timeline-step__label {
        font-size: 0.7rem;
    }
    .why-xohub__timeline .timeline-step__desc {
        font-size: 0.58rem;
    }

    .why-xohub__trust {
        padding: 14px 14px 12px;
        border-radius: 14px;
    }

    .trust-badges-grid {
        gap: 4px 8px;
    }

    .trust-badge-item {
        font-size: 0.68rem;
        padding: 3px 12px 3px 10px;
    }
    .trust-badge-item i {
        font-size: 0.7rem;
    }

    #why-xohub .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .why-xohub__title {
        font-size: 1.5rem;
    }

    .why-xohub__subtitle {
        font-size: 0.8rem;
    }

    .banner-stats {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .banner-stat {
        padding: 6px 4px;
    }
    .banner-stat__number {
        font-size: 0.85rem;
    }
    .banner-stat__label {
        font-size: 0.45rem;
    }

    .features-grid {
        gap: 4px;
    }

    .projects-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .project-card__title {
        font-size: 0.65rem;
    }
    .project-card__desc {
        font-size: 0.5rem;
    }

    .why-xohub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 320px;
    }

    .why-xohub__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-xohub__metrics .metric-stat__number .stat-label--global,
    .why-xohub__metrics .metric-stat__number .stat-label--tech {
        font-size: 0.85rem;
    }
    .why-xohub__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .trust-badge-item {
        font-size: 0.6rem;
        padding: 2px 10px 2px 8px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .why-xohub__title {
        font-size: 1.3rem;
    }

    .banner-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .why-xohub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .why-xohub__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .why-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-xohub__metrics .metric-stat__number .stat-label--global,
    .why-xohub__metrics .metric-stat__number .stat-label--tech {
        font-size: 0.7rem;
    }
    .why-xohub__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Why Contact XoHub Solutions & Client Success Highlights Responsive
================================================== */

/* ==================================================
START: Meet Our Team, Departments & Direct Contacts Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #team-directory {
        padding: 60px 0 40px;
    }

    .team-directory__header {
        margin-bottom: 36px;
    }

    .team-directory__title {
        font-size: 2.2rem;
    }

    .team-directory__subtitle {
        font-size: 0.95rem;
    }

    .leadership-card {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .leadership-card__visual {
        padding: 24px 20px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        min-height: 100px;
    }

    .leadership-card__avatar .avatar-placeholder {
        font-size: 3.5rem;
    }

    .leadership-card__badges {
        justify-content: center;
    }

    .leadership-card__content {
        padding: 24px 24px;
    }

    .leadership-card__name {
        font-size: 1.3rem;
    }

    .team-directory__departments {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .departments-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 14px;
    }

    .team-directory__responsibilities {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .resp-item__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .team-directory__flow {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .flow-timeline {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 8px;
    }

    .flow-timeline::before {
        display: none;
    }

    .flow-step {
        padding: 0 4px;
    }

    .team-directory__values {
        padding: 18px 18px 16px;
        border-radius: 16px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 10px;
    }

    .team-directory__orb--1,
    .team-directory__orb--2 {
        display: none;
    }

    .team-directory__shape--2 {
        display: none;
    }

    #team-directory .particle--3,
    #team-directory .particle--5,
    #team-directory .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #team-directory {
        padding: 40px 0 30px;
    }

    .team-directory__header {
        margin-bottom: 28px;
    }

    .team-directory__title {
        font-size: 1.8rem;
    }

    .team-directory__subtitle {
        font-size: 0.88rem;
    }

    .leadership-card__visual {
        flex-direction: column;
        padding: 18px 16px;
        gap: 10px;
    }

    .leadership-card__avatar .avatar-placeholder {
        font-size: 3rem;
    }

    .leadership-card__content {
        padding: 18px 16px;
    }

    .leadership-card__name {
        font-size: 1.1rem;
    }

    .leadership-card__intro {
        font-size: 0.8rem;
    }

    .leadership-card__expertise {
        gap: 4px 6px;
    }

    .expertise-tag {
        font-size: 0.55rem;
        padding: 1px 10px;
    }

    .leadership-card__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-contact-leader,
    .btn-linkedin {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.78rem;
    }

    .team-directory__departments {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .departments-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .department-card {
        padding: 10px 8px 10px;
    }
    .department-card__icon {
        font-size: 1.3rem;
    }
    .department-card__name {
        font-size: 0.72rem;
    }
    .department-card__desc {
        font-size: 0.58rem;
    }
    .department-card__btn {
        font-size: 0.55rem;
        padding: 1px 12px;
    }

    .team-directory__responsibilities {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .resp-item__trigger {
        padding: 10px 14px;
        font-size: 0.78rem;
        gap: 8px;
    }

    .resp-item__icon {
        font-size: 1rem;
    }

    .resp-item__trigger[aria-expanded="true"] + .resp-item__content {
        padding: 0 14px 14px;
    }

    .resp-item__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .resp-detail__value {
        font-size: 0.76rem;
    }
    .resp-detail__list {
        font-size: 0.72rem;
    }

    .team-directory__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .flow-timeline {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 4px 0;
    }

    .flow-step {
        flex-direction: row;
        gap: 14px;
        text-align: left;
        padding: 4px 0;
    }

    .flow-step__number {
        width: 30px;
        height: 30px;
        font-size: 0.6rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .flow-step__content {
        flex: 1;
    }

    .flow-step__label {
        font-size: 0.68rem;
    }
    .flow-step__desc {
        font-size: 0.56rem;
    }

    .team-directory__values {
        padding: 14px 14px 12px;
        border-radius: 14px;
    }

    .values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .value-card {
        padding: 6px 10px;
    }
    .value-card__icon {
        font-size: 0.85rem;
    }
    .value-card__label {
        font-size: 0.65rem;
    }

    #team-directory .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .team-directory__title {
        font-size: 1.5rem;
    }

    .team-directory__subtitle {
        font-size: 0.8rem;
    }

    .departments-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .department-card__name {
        font-size: 0.65rem;
    }
    .department-card__desc {
        font-size: 0.52rem;
    }

    .values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .value-card {
        padding: 4px 8px;
    }
    .value-card__label {
        font-size: 0.6rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .team-directory__title {
        font-size: 1.3rem;
    }

    .departments-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* ==================================================
END: Meet Our Team, Departments & Direct Contacts Responsive
================================================== */

/* ==================================================
START: Contact FAQ, Consultation Process & Final CTA Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #contact-faq-final {
        padding: 60px 0 40px;
    }

    .contact-faq-final__header {
        margin-bottom: 36px;
    }

    .contact-faq-final__title {
        font-size: 2.2rem;
    }

    .contact-faq-final__subtitle {
        font-size: 0.95rem;
    }

    .contact-faq-final__layout {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 36px;
    }

    .contact-faq-final__faq {
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .contact-faq-final__process {
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .contact-faq-final__journey {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .journey-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px 4px;
    }

    .journey-timeline::before {
        display: none;
    }

    .contact-faq-final__trust {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 10px;
    }

    .final-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-cta-banner__visual {
        min-height: 140px;
        order: 1;
        padding: 20px;
    }

    .final-cta-banner__title {
        font-size: 1.3rem;
    }

    .cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .contact-faq-final__orb--1,
    .contact-faq-final__orb--2 {
        display: none;
    }

    .contact-faq-final__shape--2 {
        display: none;
    }

    #contact-faq-final .particle--3,
    #contact-faq-final .particle--5,
    #contact-faq-final .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #contact-faq-final {
        padding: 40px 0 30px;
    }

    .contact-faq-final__header {
        margin-bottom: 28px;
    }

    .contact-faq-final__title {
        font-size: 1.8rem;
    }

    .contact-faq-final__subtitle {
        font-size: 0.88rem;
    }

    .faq-final-item__trigger {
        padding: 10px 12px;
        font-size: 0.78rem;
        gap: 8px;
        grid-template-columns: 1fr auto;
    }

    .faq-final-item__category {
        font-size: 0.5rem;
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }

    .faq-final-item__question {
        font-size: 0.76rem;
        grid-column: 1 / -1;
    }

    .faq-final-item__toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .faq-final-item__content {
        font-size: 0.76rem;
        padding: 0 12px;
    }

    .faq-final-item__trigger[aria-expanded="true"] + .faq-final-item__content {
        padding: 0 12px 12px;
    }

    .process-card {
        padding: 8px 12px;
        gap: 10px;
    }

    .process-card__number {
        min-width: 24px;
        height: 24px;
        font-size: 0.55rem;
    }
    .process-card__title {
        font-size: 0.76rem;
    }
    .process-card__desc {
        font-size: 0.65rem;
    }
    .process-card__time {
        font-size: 0.55rem;
    }

    .journey-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
        padding: 4px 0;
    }

    .journey-step {
        flex-direction: row;
        gap: 10px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .journey-step__icon {
        font-size: 1.1rem;
        margin-bottom: 0;
        padding: 2px 6px;
    }

    .journey-step__label {
        font-size: 0.65rem;
    }

    .trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .trust-card {
        padding: 6px 10px;
    }
    .trust-card__icon {
        font-size: 0.85rem;
    }
    .trust-card__label {
        font-size: 0.65rem;
    }

    .final-cta-banner__content {
        padding: 20px 16px;
    }

    .final-cta-banner__title {
        font-size: 1.1rem;
    }

    .final-cta-banner__desc {
        font-size: 0.82rem;
    }

    .final-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-start,
    .btn-cta-consult {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .cta-icon--1 { top: 15%; left: 10%; }
    .cta-icon--2 { top: 15%; right: 10%; }
    .cta-icon--3 { bottom: 15%; left: 15%; }
    .cta-icon--4 { bottom: 15%; right: 15%; }

    .cta-shape--1 { width: 80px; height: 80px; }
    .cta-shape--2 { width: 50px; height: 50px; }

    #contact-faq-final .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .contact-faq-final__title {
        font-size: 1.5rem;
    }

    .contact-faq-final__subtitle {
        font-size: 0.8rem;
    }

    .contact-faq-final__faq {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .contact-faq-final__process {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .journey-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .journey-step__label {
        font-size: 0.58rem;
    }

    .trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .trust-card {
        padding: 4px 8px;
    }
    .trust-card__label {
        font-size: 0.6rem;
    }

    .final-cta-banner__visual {
        min-height: 100px;
    }

    .cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .contact-faq-final__title {
        font-size: 1.3rem;
    }

    .journey-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 2px 4px;
    }

    .journey-step__icon {
        font-size: 0.9rem;
    }
    .journey-step__label {
        font-size: 0.52rem;
    }

    .trust-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .final-cta-banner__title {
        font-size: 0.95rem;
    }
}

/* ==================================================
END: Contact FAQ, Consultation Process & Final CTA Responsive
================================================== */

/* ==================================================
START: Services Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #services-hero {
        padding: 30px 0 50px;
        min-height: auto;
    }

    .services-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .services-hero__title {
        font-size: 2.4rem;
    }

    .services-hero__subtitle {
        max-width: 100%;
    }

    .services-hero__highlights {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .services-hero__visual {
        min-height: 400px;
        order: -1;
    }

    .hero-visual {
        height: 400px;
        max-width: 100%;
    }

    .visual-card--browser {
        width: 180px;
        left: 8%;
    }

    .visual-card--mobile {
        width: 70px;
        right: 6%;
    }

    .visual-card--analytics {
        width: 130px;
        left: 2%;
    }

    .visual-card--ai {
        width: 60px;
        height: 60px;
        right: 3%;
    }

    .visual-card--cloud {
        width: 48px;
        height: 48px;
        right: 18%;
    }

    .services-hero__orb--1,
    .services-hero__orb--2 {
        display: none;
    }

    .services-hero__shape--2 {
        display: none;
    }

    #services-hero .particle--3,
    #services-hero .particle--5,
    #services-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #services-hero {
        padding: 20px 0 40px;
    }

    .services-hero__title {
        font-size: 1.8rem;
    }

    .services-hero__subtitle {
        font-size: 0.9rem;
    }

    .services-hero__actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-services-start,
    .btn-services-consult {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .services-hero__trust {
        gap: 4px 10px;
    }

    .trust-badge {
        font-size: 0.65rem;
        padding: 3px 10px 3px 8px;
    }
    .trust-badge i {
        font-size: 0.7rem;
    }

    .services-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .highlight-card {
        padding: 10px 8px;
    }
    .highlight-card__number {
        font-size: 1.2rem;
    }
    .highlight-card__number i {
        font-size: 1rem;
    }
    .highlight-card__label {
        font-size: 0.6rem;
    }

    .services-hero__visual {
        min-height: 320px;
    }

    .hero-visual {
        height: 320px;
    }

    .visual-card--browser {
        width: 140px;
        left: 5%;
        top: 8%;
    }

    .browser-body {
        padding: 6px 8px 8px;
    }
    .browser-chart {
        height: 32px;
        gap: 3px;
    }
    .browser-stats {
        font-size: 0.45rem;
    }
    .browser-url {
        font-size: 0.45rem;
        padding: 0 6px;
    }

    .visual-card--mobile {
        width: 56px;
        right: 4%;
        bottom: 20%;
        border-radius: 10px;
        padding: 4px 4px 6px;
    }
    .mobile-notch {
        width: 16px;
        height: 3px;
        margin-bottom: 4px;
    }
    .mobile-app-icon {
        font-size: 0.45rem;
        border-radius: 4px;
    }

    .visual-card--analytics {
        width: 110px;
        bottom: 35%;
        left: 2%;
        padding: 8px 10px;
    }
    .analytics-title {
        font-size: 0.55rem;
    }
    .analytics-row {
        font-size: 0.55rem;
        padding: 1px 0;
    }
    .analytics-trend {
        font-size: 0.5rem;
    }

    .visual-card--ai {
        width: 48px;
        height: 48px;
        right: 2%;
        top: 50%;
    }
    .ai-icon {
        font-size: 1rem;
    }
    .ai-label {
        font-size: 0.4rem;
    }

    .visual-card--cloud {
        width: 40px;
        height: 40px;
        right: 15%;
        top: 18%;
    }
    .cloud-icon {
        font-size: 0.9rem;
    }
    .cloud-label {
        font-size: 0.4rem;
    }

    .orb {
        display: none;
    }
    .connection-lines {
        display: none;
    }

    #services-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .services-hero__title {
        font-size: 1.5rem;
    }

    .services-hero__subtitle {
        font-size: 0.8rem;
    }

    .services-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .highlight-card {
        padding: 8px 6px;
    }
    .highlight-card__number {
        font-size: 1rem;
    }
    .highlight-card__number i {
        font-size: 0.85rem;
    }
    .highlight-card__label {
        font-size: 0.55rem;
    }

    .services-hero__visual {
        min-height: 260px;
    }

    .hero-visual {
        height: 260px;
    }

    .visual-card--browser {
        width: 110px;
        left: 4%;
        top: 10%;
    }
    .browser-chart {
        height: 24px;
        gap: 2px;
    }
    .browser-stats {
        font-size: 0.4rem;
    }
    .browser-url {
        font-size: 0.4rem;
    }

    .visual-card--mobile {
        width: 44px;
        right: 3%;
        bottom: 18%;
    }
    .mobile-app-icon {
        font-size: 0.35rem;
    }

    .visual-card--analytics {
        width: 90px;
        bottom: 30%;
        left: 2%;
        padding: 6px 8px;
    }
    .analytics-title {
        font-size: 0.5rem;
    }
    .analytics-row {
        font-size: 0.5rem;
    }

    .visual-card--ai {
        width: 40px;
        height: 40px;
    }
    .ai-icon {
        font-size: 0.85rem;
    }

    .visual-card--cloud {
        width: 34px;
        height: 34px;
        right: 14%;
    }
    .cloud-icon {
        font-size: 0.75rem;
    }

    .trust-badge {
        font-size: 0.58rem;
        padding: 2px 8px 2px 6px;
    }
    .trust-badge i {
        font-size: 0.6rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .services-hero__title {
        font-size: 1.3rem;
    }

    .services-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .highlight-card {
        padding: 6px 4px;
    }
    .highlight-card__number {
        font-size: 0.85rem;
    }
    .highlight-card__number i {
        font-size: 0.7rem;
    }
    .highlight-card__label {
        font-size: 0.5rem;
    }

    .services-hero__visual {
        min-height: 220px;
    }

    .hero-visual {
        height: 220px;
    }

    .visual-card--browser {
        width: 90px;
        left: 3%;
        top: 12%;
    }
    .browser-chart {
        height: 18px;
        gap: 2px;
    }
    .browser-stats {
        font-size: 0.35rem;
        flex-direction: column;
        gap: 1px;
    }
    .browser-url {
        font-size: 0.35rem;
    }

    .visual-card--mobile {
        width: 36px;
        right: 2%;
    }
    .mobile-app-icon {
        font-size: 0.3rem;
        border-radius: 3px;
    }

    .visual-card--analytics {
        width: 75px;
        padding: 4px 6px;
    }
    .analytics-title {
        font-size: 0.45rem;
    }
    .analytics-row {
        font-size: 0.45rem;
        padding: 1px 0;
    }

    .visual-card--ai {
        width: 34px;
        height: 34px;
    }
    .ai-icon {
        font-size: 0.7rem;
    }
    .ai-label {
        display: none;
    }

    .visual-card--cloud {
        width: 30px;
        height: 30px;
    }
    .cloud-icon {
        font-size: 0.65rem;
    }
    .cloud-label {
        display: none;
    }
}

/* ==================================================
END: Services Hero Banner Responsive
================================================== */

/* ==================================================
START: Services Categories Overview Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #services-categories {
        padding: 60px 0 40px;
    }

    .services-categories__header {
        margin-bottom: 36px;
    }

    .services-categories__title {
        font-size: 2.2rem;
    }

    .services-categories__subtitle {
        font-size: 0.95rem;
    }

    .services-categories__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .category-card {
        padding: 22px 20px 20px;
        border-radius: 16px;
    }

    .category-card__title {
        font-size: 0.95rem;
    }
    .category-card__desc {
        font-size: 0.8rem;
    }

    .stats-bar {
        padding: 16px 20px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .stat-item__number {
        font-size: 1.3rem;
    }
    .stat-item__number .stat-suffix {
        font-size: 1rem;
    }
    .stat-item__number i {
        font-size: 1.3rem;
    }
    .stat-item__label {
        font-size: 0.65rem;
    }

    .cta-card {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .cta-card__content {
        padding: 28px 24px;
        order: 2;
    }

    .cta-card__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .cta-card__title {
        font-size: 1.2rem;
    }

    .cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .services-categories__orb--1,
    .services-categories__orb--2 {
        display: none;
    }

    .services-categories__shape--2 {
        display: none;
    }

    #services-categories .particle--3,
    #services-categories .particle--5,
    #services-categories .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #services-categories {
        padding: 40px 0 30px;
    }

    .services-categories__header {
        margin-bottom: 28px;
    }

    .services-categories__title {
        font-size: 1.8rem;
    }

    .services-categories__subtitle {
        font-size: 0.88rem;
    }

    .services-categories__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 24px;
    }

    .category-card {
        padding: 18px 16px 16px;
        border-radius: 14px;
    }

    .category-card__header {
        margin-bottom: 8px;
        gap: 10px;
    }

    .category-card__icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        border-radius: 12px;
    }

    .category-card__title {
        font-size: 0.9rem;
    }
    .category-card__desc {
        font-size: 0.78rem;
        margin-bottom: 10px;
    }

    .category-card__chips {
        gap: 4px 6px;
        margin-bottom: 12px;
    }

    .chip {
        font-size: 0.6rem;
        padding: 3px 10px;
    }

    .category-card__btn {
        font-size: 0.72rem;
    }

    .stats-bar {
        grid-template-columns: 1fr 1fr;
        gap: 8px 0;
        padding: 14px 16px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .stat-divider {
        display: none;
    }

    .stat-divider:nth-child(2) {
        display: block;
    }

    .stat-item {
        padding: 4px 0;
    }

    .stat-item__number {
        font-size: 1.1rem;
    }
    .stat-item__number .stat-suffix {
        font-size: 0.85rem;
    }
    .stat-item__number i {
        font-size: 1.1rem;
    }
    .stat-item__label {
        font-size: 0.6rem;
    }

    .cta-card__content {
        padding: 20px 16px;
    }

    .cta-card__title {
        font-size: 1.05rem;
    }
    .cta-card__desc {
        font-size: 0.82rem;
    }

    .cta-card__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-consult,
    .btn-cta-all-services {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .cta-card__visual {
        min-height: 100px;
    }

    .cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .cta-icon--1 { left: 15%; }
    .cta-icon--2 { right: 15%; }

    .cta-shape--1 { width: 80px; height: 80px; }
    .cta-shape--2 { width: 50px; height: 50px; }

    #services-categories .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .services-categories__title {
        font-size: 1.5rem;
    }

    .services-categories__subtitle {
        font-size: 0.8rem;
    }

    .category-card {
        padding: 14px 12px 12px;
    }

    .category-card__icon {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .category-card__title {
        font-size: 0.82rem;
    }
    .category-card__desc {
        font-size: 0.72rem;
    }

    .chip {
        font-size: 0.55rem;
        padding: 2px 8px;
    }

    .stats-bar {
        grid-template-columns: 1fr 1fr;
        padding: 10px 12px;
        gap: 4px 0;
    }

    .stat-item__number {
        font-size: 0.95rem;
    }
    .stat-item__number .stat-suffix {
        font-size: 0.75rem;
    }
    .stat-item__number i {
        font-size: 0.95rem;
    }
    .stat-item__label {
        font-size: 0.55rem;
    }

    .cta-card__title {
        font-size: 0.95rem;
    }
    .cta-card__desc {
        font-size: 0.76rem;
    }

    .btn-cta-consult,
    .btn-cta-all-services {
        font-size: 0.75rem;
        padding: 6px 16px;
    }

    .cta-card__visual {
        min-height: 80px;
    }
    .cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .services-categories__title {
        font-size: 1.3rem;
    }

    .stats-bar {
        grid-template-columns: 1fr 1fr;
        gap: 2px 0;
        padding: 8px 8px;
    }

    .stat-item__number {
        font-size: 0.85rem;
    }
    .stat-item__number .stat-suffix {
        font-size: 0.65rem;
    }
    .stat-item__number i {
        font-size: 0.85rem;
    }
    .stat-item__label {
        font-size: 0.5rem;
    }

    .cta-card__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Services Categories Overview Responsive
================================================== */

/* ==================================================
START: Featured Services Grid Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #featured-services {
        padding: 60px 0 40px;
    }

    .featured-services__header {
        margin-bottom: 36px;
    }

    .featured-services__title {
        font-size: 2.2rem;
    }

    .featured-services__subtitle {
        font-size: 0.95rem;
    }

    .featured-services__filter {
        border-radius: 30px;
        padding: 6px 8px;
        margin-bottom: 28px;
    }

    .filter-btn {
        padding: 6px 14px;
        font-size: 0.7rem;
    }

    .featured-services__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 36px;
    }

    .service-card {
        padding: 20px 18px 16px;
        border-radius: 16px;
    }

    .service-card__title {
        font-size: 0.92rem;
    }
    .service-card__desc {
        font-size: 0.78rem;
    }

    .spotlight-card {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .spotlight-card__content {
        padding: 28px 24px 24px;
        order: 2;
    }

    .spotlight-card__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .spotlight-card__title {
        font-size: 1.2rem;
    }

    .spotlight-card__badge {
        top: 12px;
        left: 16px;
        font-size: 0.55rem;
        padding: 1px 12px;
    }

    .featured-services__tech-preview {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .tech-preview-item {
        font-size: 0.7rem;
        padding: 3px 12px;
    }
    .tech-preview-item i {
        font-size: 0.8rem;
    }

    .services-cta-bottom {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .services-cta-bottom__content {
        padding: 28px 24px;
        order: 2;
    }

    .services-cta-bottom__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .services-cta-bottom__title {
        font-size: 1.2rem;
    }

    .featured-services__orb--1,
    .featured-services__orb--2 {
        display: none;
    }

    .featured-services__shape--2 {
        display: none;
    }

    #featured-services .particle--3,
    #featured-services .particle--5,
    #featured-services .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #featured-services {
        padding: 40px 0 30px;
    }

    .featured-services__header {
        margin-bottom: 28px;
    }

    .featured-services__title {
        font-size: 1.8rem;
    }

    .featured-services__subtitle {
        font-size: 0.88rem;
    }

    .featured-services__filter {
        border-radius: 20px;
        padding: 4px 6px;
        margin-bottom: 20px;
        gap: 2px;
    }

    .filter-btn {
        padding: 4px 10px;
        font-size: 0.62rem;
        border-radius: 30px;
    }

    .featured-services__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 28px;
    }

    .service-card {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .service-card__icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .service-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }
    .service-card__title {
        font-size: 0.85rem;
    }
    .service-card__desc {
        font-size: 0.74rem;
        margin-bottom: 8px;
    }

    .feature-chip {
        font-size: 0.55rem;
        padding: 1px 8px;
    }
    .tech-tag {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .service-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .service-card__size {
        font-size: 0.6rem;
        text-align: center;
    }

    .service-card__actions {
        justify-content: center;
    }

    .service-btn {
        font-size: 0.65rem;
        padding: 3px 14px;
    }

    .spotlight-card__content {
        padding: 20px 16px 18px;
    }

    .spotlight-card__title {
        font-size: 1.05rem;
    }
    .spotlight-card__desc {
        font-size: 0.82rem;
    }

    .spotlight-card__flow {
        gap: 2px 4px;
        padding: 8px 0 2px;
    }

    .flow-item {
        font-size: 0.6rem;
        padding: 2px 10px;
    }
    .flow-arrow {
        font-size: 0.5rem;
    }

    .spotlight-card__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-spotlight-discuss,
    .btn-spotlight-schedule {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    .featured-services__tech-preview {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .tech-preview-item {
        font-size: 0.62rem;
        padding: 2px 10px;
        gap: 4px;
    }
    .tech-preview-item i {
        font-size: 0.7rem;
    }

    .services-cta-bottom__content {
        padding: 20px 16px 18px;
    }

    .services-cta-bottom__title {
        font-size: 1.05rem;
    }
    .services-cta-bottom__desc {
        font-size: 0.82rem;
    }

    .services-cta-bottom__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-start-project,
    .btn-cta-contact-sales {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .services-cta-bottom__visual {
        min-height: 100px;
    }

    .services-cta-bottom__visual .cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    #featured-services .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .featured-services__title {
        font-size: 1.5rem;
    }

    .featured-services__subtitle {
        font-size: 0.8rem;
    }

    .filter-btn {
        font-size: 0.55rem;
        padding: 3px 8px;
    }

    .service-card {
        padding: 12px 10px 12px;
    }

    .service-card__icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .service-card__title {
        font-size: 0.78rem;
    }
    .service-card__desc {
        font-size: 0.68rem;
    }

    .feature-chip {
        font-size: 0.5rem;
        padding: 1px 6px;
    }
    .tech-tag {
        font-size: 0.45rem;
        padding: 0 6px;
    }

    .service-btn {
        font-size: 0.6rem;
        padding: 2px 12px;
    }

    .spotlight-card__title {
        font-size: 0.95rem;
    }

    .spotlight-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .tech-preview-item {
        font-size: 0.55rem;
        padding: 2px 8px;
    }

    .services-cta-bottom__title {
        font-size: 0.95rem;
    }

    .services-cta-bottom__visual .cta-icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .featured-services__title {
        font-size: 1.3rem;
    }

    .filter-btn {
        font-size: 0.5rem;
        padding: 2px 6px;
    }

    .spotlight-card__flow {
        flex-wrap: wrap;
        gap: 2px 3px;
    }
    .flow-item {
        font-size: 0.5rem;
        padding: 1px 8px;
    }
    .flow-arrow {
        font-size: 0.4rem;
    }

    .tech-preview-item {
        font-size: 0.5rem;
        padding: 1px 6px;
    }
    .tech-preview-item i {
        font-size: 0.6rem;
    }

    .services-cta-bottom__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Featured Services Grid Responsive
================================================== */

/* ==================================================
START: Detailed Service Showcase Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #service-showcase {
        padding: 60px 0 40px;
    }

    .service-showcase__header {
        margin-bottom: 36px;
    }

    .service-showcase__title {
        font-size: 2.2rem;
    }

    .service-showcase__subtitle {
        font-size: 0.95rem;
    }

    .showcase-block {
        grid-template-columns: 1fr !important;
        gap: 24px;
        padding: 30px 0;
    }

    .showcase-block--right .showcase-block__visual {
        order: 1;
    }

    .showcase-block--right .showcase-block__content {
        order: 2;
    }

    .showcase-block__visual {
        min-height: 220px;
    }

    .showcase-illustration {
        max-width: 340px;
        aspect-ratio: 1 / 1;
    }

    .showcase-block__title {
        font-size: 1.3rem;
    }

    .showcase-block__features {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .showcase-block__meta {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .enterprise-cta {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .enterprise-cta__content {
        padding: 28px 24px;
        order: 2;
    }

    .enterprise-cta__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .enterprise-cta__title {
        font-size: 1.2rem;
    }

    .service-showcase__orb--1,
    .service-showcase__orb--2 {
        display: none;
    }

    .service-showcase__shape--2 {
        display: none;
    }

    #service-showcase .particle--3,
    #service-showcase .particle--5,
    #service-showcase .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #service-showcase {
        padding: 40px 0 30px;
    }

    .service-showcase__header {
        margin-bottom: 28px;
    }

    .service-showcase__title {
        font-size: 1.8rem;
    }

    .service-showcase__subtitle {
        font-size: 0.88rem;
    }

    .showcase-block {
        padding: 24px 0;
        gap: 18px;
    }

    .showcase-block__visual {
        min-height: 180px;
    }

    .showcase-illustration {
        max-width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 18px;
    }

    .showcase-illustration .ill-icon {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .showcase-block__badge {
        font-size: 0.6rem;
    }

    .showcase-block__title {
        font-size: 1.1rem;
    }

    .showcase-block__problem {
        font-size: 0.82rem;
        padding-left: 10px;
    }

    .showcase-block__solution {
        font-size: 0.82rem;
    }

    .feature-group ul li {
        font-size: 0.74rem;
    }

    .tech-chip {
        font-size: 0.55rem;
        padding: 1px 10px;
    }

    .showcase-block__meta {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px 12px;
    }

    .meta-item__value {
        font-size: 0.74rem;
    }

    .showcase-block__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-showcase-learn,
    .btn-showcase-proposal {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .enterprise-cta__content {
        padding: 20px 16px 18px;
    }

    .enterprise-cta__title {
        font-size: 1.05rem;
    }
    .enterprise-cta__desc {
        font-size: 0.82rem;
    }

    .enterprise-cta__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-strategy,
    .btn-cta-expert {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .enterprise-cta__visual {
        min-height: 100px;
    }

    .e-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .ill-code-block .code-line {
        font-size: 0.5rem;
    }

    .ill-dashboard {
        width: 140px;
        padding: 10px 14px;
    }
    .ill-dashboard .dash-row {
        font-size: 0.6rem;
    }

    .ill-ecom-card {
        min-width: 110px;
        padding: 12px 16px;
    }
    .ill-ecom-card .ecom-product {
        font-size: 0.65rem;
    }
    .ill-ecom-card .ecom-price {
        font-size: 1rem;
    }
    .ill-ecom-card .ecom-cart {
        font-size: 0.6rem;
        padding: 3px 12px;
    }

    .ill-marketing-chart {
        height: 60px !important;
        gap: 4px !important;
    }
    .ill-marketing-chart .m-chart-bar {
        width: 12px !important;
    }

    .ill-design-grid .design-box {
        width: 44px;
        height: 38px;
    }

    .ill-ai-node .ai-node-icon {
        font-size: 1.8rem;
    }

    #service-showcase .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .service-showcase__title {
        font-size: 1.5rem;
    }

    .service-showcase__subtitle {
        font-size: 0.8rem;
    }

    .showcase-illustration .ill-icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .showcase-block__title {
        font-size: 1rem;
    }

    .feature-group ul li {
        font-size: 0.7rem;
        padding-left: 14px;
    }

    .tech-chip {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .ill-dashboard {
        width: 120px;
        padding: 8px 10px;
    }

    .ill-ecom-card {
        min-width: 90px;
        padding: 10px 12px;
    }
    .ill-ecom-card .ecom-price {
        font-size: 0.85rem;
    }

    .ill-marketing-chart .m-chart-bar {
        width: 10px !important;
    }

    .ill-design-grid .design-box {
        width: 36px;
        height: 32px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .service-showcase__title {
        font-size: 1.3rem;
    }

    .showcase-illustration {
        border-radius: 14px;
    }

    .ill-code-block {
        padding: 10px 14px;
    }
    .ill-code-block .code-line {
        font-size: 0.45rem;
    }

    .ill-dashboard {
        width: 100px;
        padding: 6px 8px;
    }
    .ill-dashboard .dash-row {
        font-size: 0.5rem;
    }

    .ill-ecom-card {
        min-width: 80px;
        padding: 8px 10px;
    }
    .ill-ecom-card .ecom-product {
        font-size: 0.55rem;
    }
    .ill-ecom-card .ecom-price {
        font-size: 0.75rem;
    }
    .ill-ecom-card .ecom-cart {
        font-size: 0.5rem;
        padding: 2px 10px;
    }

    .ill-marketing-chart {
        height: 50px !important;
        gap: 3px !important;
    }
    .ill-marketing-chart .m-chart-bar {
        width: 8px !important;
    }

    .ill-design-grid {
        gap: 6px !important;
    }
    .ill-design-grid .design-box {
        width: 30px;
        height: 26px;
    }
}

/* ==================================================
END: Detailed Service Showcase Responsive
================================================== */

/* ==================================================
START: Technologies, Platforms & Tools We Use Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #tech-ecosystem {
        padding: 60px 0 40px;
    }

    .tech-ecosystem__header {
        margin-bottom: 36px;
    }

    .tech-ecosystem__title {
        font-size: 2.2rem;
    }

    .tech-ecosystem__subtitle {
        font-size: 0.95rem;
    }

    .tech-ecosystem__tabs {
        border-radius: 30px;
        padding: 6px 8px;
        margin-bottom: 28px;
        justify-content: center;
    }

    .tech-tab {
        padding: 5px 12px;
        font-size: 0.65rem;
    }

    .tech-ecosystem__grid {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .tech-category {
        margin-bottom: 18px;
    }
    .tech-category__title {
        font-size: 0.78rem;
    }
    .tech-item {
        font-size: 0.7rem;
        padding: 3px 12px 3px 10px;
    }
    .tech-item i {
        font-size: 0.8rem;
    }

    .tech-spotlight {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .tech-spotlight__content {
        padding: 28px 24px;
        order: 2;
    }

    .tech-spotlight__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .tech-spotlight__title {
        font-size: 1.15rem;
    }

    .tech-spotlight__flow {
        gap: 3px 4px;
    }
    .flow-node {
        padding: 3px 10px;
    }
    .flow-node__label {
        font-size: 0.6rem;
    }

    .tech-ecosystem__workflow {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .workflow-step {
        padding: 4px 10px;
    }
    .workflow-step__label {
        font-size: 0.62rem;
    }
    .workflow-step__icon {
        font-size: 0.75rem;
    }

    .tech-ecosystem__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .tech-ecosystem__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .tech-ecosystem__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-label--cloud,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--scalable,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--secure {
        font-size: 1.3rem;
    }
    .tech-ecosystem__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .tech-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .tech-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .tech-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .tech-cta-banner__title {
        font-size: 1.2rem;
    }

    .spotlight-tech-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .tech-ecosystem__orb--1,
    .tech-ecosystem__orb--2 {
        display: none;
    }

    .tech-ecosystem__shape--2 {
        display: none;
    }

    #tech-ecosystem .particle--3,
    #tech-ecosystem .particle--5,
    #tech-ecosystem .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #tech-ecosystem {
        padding: 40px 0 30px;
    }

    .tech-ecosystem__header {
        margin-bottom: 28px;
    }

    .tech-ecosystem__title {
        font-size: 1.8rem;
    }

    .tech-ecosystem__subtitle {
        font-size: 0.88rem;
    }

    .tech-ecosystem__tabs {
        border-radius: 16px;
        padding: 4px 6px;
        margin-bottom: 20px;
        gap: 2px;
        justify-content: center;
    }

    .tech-tab {
        padding: 3px 10px;
        font-size: 0.6rem;
        border-radius: 30px;
    }

    .tech-ecosystem__grid {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .tech-category {
        margin-bottom: 14px;
    }
    .tech-category__title {
        font-size: 0.72rem;
    }
    .tech-items {
        gap: 4px 8px;
    }
    .tech-item {
        font-size: 0.62rem;
        padding: 2px 10px 2px 8px;
        gap: 4px;
    }
    .tech-item i {
        font-size: 0.7rem;
    }

    .tech-spotlight__content {
        padding: 20px 16px 18px;
    }

    .tech-spotlight__title {
        font-size: 1.05rem;
    }
    .tech-spotlight__desc {
        font-size: 0.82rem;
    }

    .tech-spotlight__flow {
        gap: 2px 3px;
        padding: 4px 0;
        flex-wrap: wrap;
    }
    .flow-node {
        padding: 2px 8px;
        gap: 3px;
    }
    .flow-node__icon {
        font-size: 0.6rem;
    }
    .flow-node__label {
        font-size: 0.55rem;
    }
    .flow-arrow {
        font-size: 0.55rem;
    }

    .tech-spotlight__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-spotlight-tech {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .tech-ecosystem__workflow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .workflow-visual {
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
    }

    .workflow-step {
        justify-content: center;
        padding: 4px 12px;
        border-radius: 30px;
    }
    .workflow-step__arrow {
        display: none !important;
    }
    .workflow-step__label {
        font-size: 0.6rem;
    }

    .tech-ecosystem__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .tech-ecosystem__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .tech-ecosystem__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-label--cloud,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--scalable,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--secure {
        font-size: 1rem;
    }
    .tech-ecosystem__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .tech-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .tech-cta-banner__title {
        font-size: 1.05rem;
    }
    .tech-cta-banner__desc {
        font-size: 0.82rem;
    }

    .tech-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-tech-discuss,
    .btn-cta-tech-architect {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .tech-cta-banner__visual {
        min-height: 100px;
    }

    .t-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .spotlight-tech-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    #tech-ecosystem .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .tech-ecosystem__title {
        font-size: 1.5rem;
    }

    .tech-ecosystem__subtitle {
        font-size: 0.8rem;
    }

    .tech-tab {
        font-size: 0.55rem;
        padding: 2px 8px;
    }

    .tech-ecosystem__grid {
        padding: 12px 10px 10px;
    }

    .tech-item {
        font-size: 0.55rem;
        padding: 1px 8px 1px 6px;
    }
    .tech-item i {
        font-size: 0.6rem;
    }

    .tech-spotlight__title {
        font-size: 0.95rem;
    }

    .tech-ecosystem__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 320px;
    }

    .tech-ecosystem__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-label--cloud,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--scalable,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--secure {
        font-size: 0.85rem;
    }
    .tech-ecosystem__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .tech-cta-banner__title {
        font-size: 0.95rem;
    }

    .spotlight-tech-icon {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .tech-ecosystem__title {
        font-size: 1.3rem;
    }

    .tech-tab {
        font-size: 0.5rem;
        padding: 1px 6px;
    }

    .tech-items {
        gap: 2px 6px;
    }
    .tech-item {
        font-size: 0.5rem;
        padding: 1px 6px 1px 4px;
    }
    .tech-item i {
        font-size: 0.55rem;
    }

    .tech-ecosystem__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .tech-ecosystem__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .tech-ecosystem__metrics .metric-stat__number .stat-label--cloud,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--scalable,
    .tech-ecosystem__metrics .metric-stat__number .stat-label--secure {
        font-size: 0.7rem;
    }
    .tech-ecosystem__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Technologies, Platforms & Tools We Use Responsive
================================================== */

/* ==================================================
START: Industries We Serve Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #industries-served {
        padding: 60px 0 40px;
    }

    .industries-served__header {
        margin-bottom: 36px;
    }

    .industries-served__title {
        font-size: 2.2rem;
    }

    .industries-served__subtitle {
        font-size: 0.95rem;
    }

    .industry-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .industry-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .industry-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .industry-banner__title {
        font-size: 1.3rem;
    }

    .industries-served__grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
        margin-bottom: 36px;
    }

    .industry-card {
        padding: 16px 14px 14px;
        border-radius: 16px;
    }

    .industry-card__title {
        font-size: 0.85rem;
    }
    .industry-card__overview {
        font-size: 0.72rem;
    }
    .detail-value {
        font-size: 0.68rem;
    }

    .industries-served__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .industries-served__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .industries-served__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .industries-served__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .industries-served__metrics .metric-stat__number .stat-label--global,
    .industries-served__metrics .metric-stat__number .stat-label--custom,
    .industries-served__metrics .metric-stat__number .stat-label--modern {
        font-size: 1.3rem;
    }
    .industries-served__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .industries-served__timeline {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .expertise-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px 8px;
    }

    .expertise-timeline::before {
        display: none;
    }

    .expertise-step {
        padding: 0 4px;
    }
    .expertise-step__number {
        width: 26px;
        height: 26px;
        font-size: 0.5rem;
    }
    .expertise-step__label {
        font-size: 0.6rem;
    }

    .industry-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .industry-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .industry-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .industry-cta-banner__title {
        font-size: 1.2rem;
    }

    .banner-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .industries-served__orb--1,
    .industries-served__orb--2 {
        display: none;
    }

    .industries-served__shape--2 {
        display: none;
    }

    #industries-served .particle--3,
    #industries-served .particle--5,
    #industries-served .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #industries-served {
        padding: 40px 0 30px;
    }

    .industries-served__header {
        margin-bottom: 28px;
    }

    .industries-served__title {
        font-size: 1.8rem;
    }

    .industries-served__subtitle {
        font-size: 0.88rem;
    }

    .industry-banner__content {
        padding: 20px 16px 18px;
    }

    .industry-banner__title {
        font-size: 1.1rem;
    }
    .industry-banner__desc {
        font-size: 0.82rem;
    }

    .industry-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-industry,
    .btn-banner-consult {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .industries-served__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 28px;
    }

    .industry-card {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .industry-card__icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .industry-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }
    .industry-card__title {
        font-size: 0.8rem;
    }
    .industry-card__overview {
        font-size: 0.68rem;
    }

    .detail-row {
        gap: 1px;
    }
    .detail-label {
        font-size: 0.5rem;
    }
    .detail-value {
        font-size: 0.64rem;
    }

    .svc-tag,
    .ind-tech {
        font-size: 0.5rem;
        padding: 0 8px;
    }

    .industry-card__btn {
        font-size: 0.65rem;
        padding: 3px 14px;
    }

    .industries-served__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .industries-served__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .industries-served__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .industries-served__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .industries-served__metrics .metric-stat__number .stat-label--global,
    .industries-served__metrics .metric-stat__number .stat-label--custom,
    .industries-served__metrics .metric-stat__number .stat-label--modern {
        font-size: 1rem;
    }
    .industries-served__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .industries-served__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .expertise-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 8px 6px;
    }

    .expertise-step {
        flex-direction: row;
        gap: 10px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .expertise-step__number {
        width: 24px;
        height: 24px;
        font-size: 0.45rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .expertise-step__label {
        font-size: 0.6rem;
    }
    .expertise-step__arrow {
        display: none;
    }

    .industry-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .industry-cta-banner__title {
        font-size: 1.05rem;
    }
    .industry-cta-banner__desc {
        font-size: 0.82rem;
    }

    .industry-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-industry-expert,
    .btn-cta-industry-proposal {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .industry-cta-banner__visual {
        min-height: 100px;
    }

    .i-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .banner-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #industries-served .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .industries-served__title {
        font-size: 1.5rem;
    }

    .industries-served__subtitle {
        font-size: 0.8rem;
    }

    .industries-served__grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .industry-card {
        padding: 10px 8px 10px;
    }

    .industry-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    .industry-card__title {
        font-size: 0.72rem;
    }
    .industry-card__overview {
        font-size: 0.62rem;
    }

    .detail-value {
        font-size: 0.58rem;
    }

    .svc-tag,
    .ind-tech {
        font-size: 0.45rem;
        padding: 0 6px;
    }

    .industries-served__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 320px;
    }

    .industries-served__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .industries-served__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .industries-served__metrics .metric-stat__number .stat-label--global,
    .industries-served__metrics .metric-stat__number .stat-label--custom,
    .industries-served__metrics .metric-stat__number .stat-label--modern {
        font-size: 0.85rem;
    }
    .industries-served__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .expertise-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }
    .expertise-step__label {
        font-size: 0.55rem;
    }

    .industry-cta-banner__title {
        font-size: 0.95rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .industries-served__title {
        font-size: 1.3rem;
    }

    .industries-served__grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .expertise-timeline {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .industries-served__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .industries-served__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .industries-served__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .industries-served__metrics .metric-stat__number .stat-label--global,
    .industries-served__metrics .metric-stat__number .stat-label--custom,
    .industries-served__metrics .metric-stat__number .stat-label--modern {
        font-size: 0.7rem;
    }
    .industries-served__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Industries We Serve Responsive
================================================== */

/* ==================================================
START: Why Choose XoHub Solutions & Competitive Advantages Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #why-choose-xohub {
        padding: 60px 0 40px;
    }

    .why-choose-xohub__header {
        margin-bottom: 36px;
    }

    .why-choose-xohub__title {
        font-size: 2.2rem;
    }

    .why-choose-xohub__subtitle {
        font-size: 0.95rem;
    }

    .trust-banner-advantage {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .trust-banner-advantage__content {
        padding: 28px 24px;
        order: 2;
    }

    .trust-banner-advantage__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .trust-banner-advantage__title {
        font-size: 1.3rem;
    }

    .why-choose-xohub__advantages {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .advantages-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .advantage-card {
        padding: 14px 12px 12px;
    }

    .why-choose-xohub__comparison {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .comparison-table__header,
    .comparison-table__row {
        grid-template-columns: 1fr 1.1fr 1.1fr 1.3fr;
        min-width: 520px;
        font-size: 0.72rem;
    }

    .comparison-table__cell {
        padding: 3px 6px;
    }

    .why-choose-xohub__principles {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px 10px;
    }

    .why-choose-xohub__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .why-choose-xohub__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .why-choose-xohub__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--global,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--agile {
        font-size: 1.3rem;
    }
    .why-choose-xohub__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .choose-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .choose-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .choose-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .choose-cta-banner__title {
        font-size: 1.2rem;
    }

    .tb-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .why-choose-xohub__orb--1,
    .why-choose-xohub__orb--2 {
        display: none;
    }

    .why-choose-xohub__shape--2 {
        display: none;
    }

    #why-choose-xohub .particle--3,
    #why-choose-xohub .particle--5,
    #why-choose-xohub .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #why-choose-xohub {
        padding: 40px 0 30px;
    }

    .why-choose-xohub__header {
        margin-bottom: 28px;
    }

    .why-choose-xohub__title {
        font-size: 1.8rem;
    }

    .why-choose-xohub__subtitle {
        font-size: 0.88rem;
    }

    .trust-banner-advantage__content {
        padding: 20px 16px 18px;
    }

    .trust-banner-advantage__title {
        font-size: 1.1rem;
    }
    .trust-banner-advantage__desc {
        font-size: 0.82rem;
    }

    .trust-banner-advantage__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-start,
    .btn-banner-strategy {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .why-choose-xohub__advantages {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .advantages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .advantage-card {
        padding: 12px 10px 10px;
    }
    .advantage-card__icon {
        font-size: 1.1rem;
    }
    .advantage-card__title {
        font-size: 0.78rem;
    }
    .advantage-card__desc {
        font-size: 0.65rem;
    }
    .advantage-card__benefit {
        font-size: 0.58rem;
        padding: 1px 10px;
    }
    .advantage-card__btn {
        font-size: 0.58rem;
        padding: 2px 12px;
    }

    .why-choose-xohub__comparison {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .comparison-table__header,
    .comparison-table__row {
        grid-template-columns: 1fr 1fr 1fr 1.1fr;
        min-width: 460px;
        font-size: 0.62rem;
        padding: 4px 0;
    }

    .comparison-table__cell {
        padding: 2px 4px;
    }

    .why-choose-xohub__principles {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .principle-card {
        padding: 6px 10px;
    }
    .principle-card__icon {
        font-size: 0.85rem;
    }
    .principle-card__label {
        font-size: 0.65rem;
    }

    .why-choose-xohub__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .why-choose-xohub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .why-choose-xohub__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--global,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--agile {
        font-size: 1rem;
    }
    .why-choose-xohub__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .choose-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .choose-cta-banner__title {
        font-size: 1.05rem;
    }
    .choose-cta-banner__desc {
        font-size: 0.82rem;
    }

    .choose-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-choose-proposal,
    .btn-cta-choose-experts {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .choose-cta-banner__visual {
        min-height: 100px;
    }

    .c-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .tb-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #why-choose-xohub .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .why-choose-xohub__title {
        font-size: 1.5rem;
    }

    .why-choose-xohub__subtitle {
        font-size: 0.8rem;
    }

    .advantages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .advantage-card {
        padding: 10px 8px 8px;
    }
    .advantage-card__title {
        font-size: 0.72rem;
    }
    .advantage-card__desc {
        font-size: 0.6rem;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .principle-card {
        padding: 4px 8px;
    }
    .principle-card__label {
        font-size: 0.6rem;
    }

    .why-choose-xohub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 320px;
    }

    .why-choose-xohub__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--global,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--agile {
        font-size: 0.85rem;
    }
    .why-choose-xohub__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .choose-cta-banner__title {
        font-size: 0.95rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .why-choose-xohub__title {
        font-size: 1.3rem;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .principles-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .why-choose-xohub__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .why-choose-xohub__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .why-choose-xohub__metrics .metric-stat__number .stat-label--hours,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--global,
    .why-choose-xohub__metrics .metric-stat__number .stat-label--agile {
        font-size: 0.7rem;
    }
    .why-choose-xohub__metrics .metric-stat__label {
        font-size: 0.45rem;
    }
}

/* ==================================================
END: Why Choose XoHub Solutions & Competitive Advantages Responsive
================================================== */

/* ==================================================
START: Services FAQ & Final Call-to-Action Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #services-faq-final {
        padding: 60px 0 40px;
    }

    .services-faq-final__header {
        margin-bottom: 36px;
    }

    .services-faq-final__title {
        font-size: 2.2rem;
    }

    .services-faq-final__subtitle {
        font-size: 0.95rem;
    }

    .services-faq-final__layout {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 36px;
    }

    .services-faq-final__faq {
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .services-faq-final__models {
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .models-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .services-faq-final__onboarding {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .onboarding-timeline {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px 4px;
    }

    .onboarding-timeline::before {
        display: none;
    }

    .onboarding-step {
        padding: 0 4px;
    }
    .onboarding-step__number {
        width: 24px;
        height: 24px;
        font-size: 0.5rem;
    }
    .onboarding-step__label {
        font-size: 0.52rem;
    }

    .services-faq-final__guarantees {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 32px;
    }

    .guarantees-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 10px;
    }

    .final-services-cta {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-services-cta__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-services-cta__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .final-services-cta__title {
        font-size: 1.2rem;
    }

    .fs-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .services-faq-final__orb--1,
    .services-faq-final__orb--2 {
        display: none;
    }

    .services-faq-final__shape--2 {
        display: none;
    }

    #services-faq-final .particle--3,
    #services-faq-final .particle--5,
    #services-faq-final .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #services-faq-final {
        padding: 40px 0 30px;
    }

    .services-faq-final__header {
        margin-bottom: 28px;
    }

    .services-faq-final__title {
        font-size: 1.8rem;
    }

    .services-faq-final__subtitle {
        font-size: 0.88rem;
    }

    .faq-final-item__trigger {
        padding: 10px 12px;
        font-size: 0.78rem;
        gap: 8px;
        grid-template-columns: 1fr auto;
    }

    .faq-final-item__category {
        font-size: 0.5rem;
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }

    .faq-final-item__question {
        font-size: 0.76rem;
        grid-column: 1 / -1;
    }

    .faq-final-item__toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .faq-final-item__content {
        font-size: 0.76rem;
        padding: 0 12px;
    }

    .faq-final-item__trigger[aria-expanded="true"] + .faq-final-item__content {
        padding: 0 12px 12px;
    }

    .services-faq-final__models {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .models-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .model-card {
        padding: 10px 12px;
    }
    .model-card__title {
        font-size: 0.72rem;
    }
    .model-card__desc {
        font-size: 0.64rem;
    }
    .model-card__btn {
        font-size: 0.55rem;
        padding: 1px 12px;
    }

    .services-faq-final__onboarding {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .onboarding-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .onboarding-step {
        flex-direction: row;
        gap: 8px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .onboarding-step__number {
        width: 22px;
        height: 22px;
        font-size: 0.45rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .onboarding-step__label {
        font-size: 0.55rem;
    }

    .services-faq-final__guarantees {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .guarantees-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .guarantee-card {
        padding: 6px 10px;
    }
    .guarantee-card__icon {
        font-size: 0.85rem;
    }
    .guarantee-card__label {
        font-size: 0.65rem;
    }

    .final-services-cta__content {
        padding: 20px 16px 18px;
    }

    .final-services-cta__title {
        font-size: 1.05rem;
    }
    .final-services-cta__desc {
        font-size: 0.82rem;
    }

    .final-services-cta__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-services-start,
    .btn-cta-services-consult {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .final-services-cta__visual {
        min-height: 100px;
    }

    .fs-cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #services-faq-final .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .services-faq-final__title {
        font-size: 1.5rem;
    }

    .services-faq-final__subtitle {
        font-size: 0.8rem;
    }

    .services-faq-final__faq {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .services-faq-final__models {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .onboarding-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .onboarding-step__label {
        font-size: 0.5rem;
    }

    .guarantees-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .guarantee-card {
        padding: 4px 8px;
    }
    .guarantee-card__label {
        font-size: 0.6rem;
    }

    .final-services-cta__title {
        font-size: 0.95rem;
    }

    .fs-cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .services-faq-final__title {
        font-size: 1.3rem;
    }

    .onboarding-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 2px 4px;
    }

    .onboarding-step__label {
        font-size: 0.45rem;
    }

    .guarantees-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .final-services-cta__title {
        font-size: 0.85rem;
    }

    .fs-cta-icon {
        width: 22px;
        height: 22px;
        font-size: 0.55rem;
    }
}

/* ==================================================
END: Services FAQ & Final Call-to-Action Responsive
================================================== */

/* ==================================================
START: Web Development Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-hero {
        padding: 30px 0 50px;
        min-height: auto;
    }

    .webdev-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .webdev-hero__title {
        font-size: 2.4rem;
    }

    .webdev-hero__subtitle {
        max-width: 100%;
    }

    .webdev-hero__highlights {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px 10px;
    }

    .highlight-card {
        padding: 8px 12px;
    }
    .highlight-card__label {
        font-size: 0.7rem;
    }

    .webdev-hero__visual {
        min-height: 400px;
        order: -1;
    }

    .hero-visual {
        height: 400px;
        max-width: 100%;
    }

    .visual-card--browser {
        width: 200px;
        left: 8%;
    }

    .visual-card--code {
        width: 120px;
        left: 4%;
        bottom: 22%;
    }

    .visual-card--mobile {
        width: 70px;
        right: 6%;
    }

    .code-icon {
        font-size: 0.7rem;
    }
    .code-icon--1 { font-size: 1.1rem; }

    .webdev-hero__orb--1,
    .webdev-hero__orb--2 {
        display: none;
    }

    .webdev-hero__shape--2 {
        display: none;
    }

    #webdev-hero .particle--3,
    #webdev-hero .particle--5,
    #webdev-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-hero {
        padding: 20px 0 40px;
    }

    .webdev-hero__title {
        font-size: 1.8rem;
    }

    .webdev-hero__subtitle {
        font-size: 0.9rem;
    }

    .webdev-hero__actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-webdev-start,
    .btn-webdev-portfolio {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .webdev-hero__trust {
        gap: 4px 10px;
    }

    .webdev-hero__trust .trust-badge {
        font-size: 0.65rem;
        padding: 3px 10px 3px 8px;
    }
    .webdev-hero__trust .trust-badge i {
        font-size: 0.7rem;
    }

    .webdev-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .highlight-card {
        padding: 6px 10px;
    }
    .highlight-card__icon {
        font-size: 0.9rem;
    }
    .highlight-card__label {
        font-size: 0.65rem;
    }

    .webdev-hero__visual {
        min-height: 320px;
    }

    .hero-visual {
        height: 320px;
    }

    .visual-card--browser {
        width: 150px;
        left: 5%;
        top: 8%;
    }

    .browser-body {
        padding: 6px 8px 8px;
    }
    .browser-chart {
        height: 32px;
        gap: 3px;
    }
    .browser-stats {
        font-size: 0.45rem;
    }
    .browser-url {
        font-size: 0.45rem;
        padding: 0 6px;
    }

    .visual-card--code {
        width: 100px;
        left: 3%;
        bottom: 25%;
        padding: 8px 10px;
    }
    .code-block .code-line {
        font-size: 0.45rem;
    }

    .visual-card--mobile {
        width: 56px;
        right: 4%;
        bottom: 20%;
        border-radius: 10px;
        padding: 4px 4px 6px;
    }
    .mobile-notch {
        width: 16px;
        height: 3px;
        margin-bottom: 4px;
    }
    .mobile-app-icon {
        font-size: 0.45rem;
        border-radius: 4px;
    }

    .code-icon {
        font-size: 0.6rem;
    }
    .code-icon--1 { font-size: 0.9rem; }
    .code-icon--2 { font-size: 0.7rem; }
    .code-icon--3 { font-size: 0.6rem; }

    .orb {
        display: none;
    }
    .connection-lines {
        display: none;
    }

    #webdev-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-hero__title {
        font-size: 1.5rem;
    }

    .webdev-hero__subtitle {
        font-size: 0.8rem;
    }

    .webdev-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .highlight-card {
        padding: 4px 8px;
    }
    .highlight-card__icon {
        font-size: 0.8rem;
    }
    .highlight-card__label {
        font-size: 0.6rem;
    }

    .webdev-hero__trust .trust-badge {
        font-size: 0.58rem;
        padding: 2px 8px 2px 6px;
    }
    .webdev-hero__trust .trust-badge i {
        font-size: 0.6rem;
    }

    .webdev-hero__visual {
        min-height: 260px;
    }

    .hero-visual {
        height: 260px;
    }

    .visual-card--browser {
        width: 120px;
        left: 4%;
        top: 10%;
    }
    .browser-chart {
        height: 24px;
        gap: 2px;
    }
    .browser-stats {
        font-size: 0.4rem;
        flex-direction: column;
        gap: 1px;
    }
    .browser-url {
        font-size: 0.4rem;
    }

    .visual-card--code {
        width: 80px;
        left: 2%;
        bottom: 30%;
        padding: 6px 8px;
    }
    .code-block .code-line {
        font-size: 0.4rem;
    }

    .visual-card--mobile {
        width: 44px;
        right: 3%;
        bottom: 18%;
    }
    .mobile-app-icon {
        font-size: 0.35rem;
    }

    .code-icon--1 { font-size: 0.7rem; }
    .code-icon--2 { font-size: 0.6rem; }
    .code-icon--3 { font-size: 0.5rem; }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-hero__title {
        font-size: 1.3rem;
    }

    .webdev-hero__highlights {
        grid-template-columns: 1fr 1fr;
        gap: 3px 4px;
    }

    .highlight-card {
        padding: 3px 6px;
    }
    .highlight-card__label {
        font-size: 0.55rem;
    }

    .webdev-hero__visual {
        min-height: 220px;
    }

    .hero-visual {
        height: 220px;
    }

    .visual-card--browser {
        width: 100px;
        left: 3%;
        top: 12%;
    }
    .browser-chart {
        height: 18px;
        gap: 2px;
    }

    .visual-card--code {
        width: 70px;
        padding: 4px 6px;
    }
    .code-block .code-line {
        font-size: 0.35rem;
    }

    .visual-card--mobile {
        width: 36px;
        right: 2%;
    }
    .mobile-app-icon {
        font-size: 0.3rem;
        border-radius: 3px;
    }

    .code-icon--1 { font-size: 0.6rem; }
    .code-icon--2 { font-size: 0.5rem; }
    .code-icon--3 { display: none; }
}

/* ==================================================
END: Web Development Hero Banner Responsive
================================================== */

/* ==================================================
START: Why Professional Web Development Matters Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #why-webdev-matters {
        padding: 60px 0 40px;
    }

    .why-webdev-matters__header {
        margin-bottom: 36px;
    }

    .why-webdev-matters__title {
        font-size: 2.2rem;
    }

    .why-webdev-matters__subtitle {
        font-size: 0.95rem;
    }

    .insight-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .insight-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .insight-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .insight-banner__title {
        font-size: 1.3rem;
    }

    .why-webdev-matters__benefits {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .benefit-card {
        padding: 14px 12px 12px;
    }

    .why-webdev-matters__stats {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .stats-impact-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .impact-stat__icon {
        font-size: 1.6rem;
    }

    .why-webdev-matters__comparison {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .why-webdev-matters__comparison .comparison-table__header,
    .why-webdev-matters__comparison .comparison-table__row {
        grid-template-columns: 1fr 1.1fr 1.3fr;
        min-width: 480px;
        font-size: 0.72rem;
    }

    .why-webdev-matters__comparison .comparison-table__cell {
        padding: 3px 6px;
    }

    .webdev-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .webdev-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .webdev-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .webdev-cta-banner__title {
        font-size: 1.2rem;
    }

    .wd-cta-icon,
    .ib-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .why-webdev-matters__orb--1,
    .why-webdev-matters__orb--2 {
        display: none;
    }

    .why-webdev-matters__shape--2 {
        display: none;
    }

    #why-webdev-matters .particle--3,
    #why-webdev-matters .particle--5,
    #why-webdev-matters .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #why-webdev-matters {
        padding: 40px 0 30px;
    }

    .why-webdev-matters__header {
        margin-bottom: 28px;
    }

    .why-webdev-matters__title {
        font-size: 1.8rem;
    }

    .why-webdev-matters__subtitle {
        font-size: 0.88rem;
    }

    .insight-banner__content {
        padding: 20px 16px 18px;
    }

    .insight-banner__title {
        font-size: 1.1rem;
    }
    .insight-banner__desc {
        font-size: 0.82rem;
    }

    .insight-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-discuss,
    .btn-banner-consult {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .why-webdev-matters__benefits {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .benefit-card {
        padding: 12px 10px 10px;
    }
    .benefit-card__icon {
        font-size: 1.1rem;
    }
    .benefit-card__title {
        font-size: 0.78rem;
    }
    .benefit-card__desc {
        font-size: 0.65rem;
    }
    .benefit-card__outcome {
        font-size: 0.58rem;
        padding: 1px 10px;
    }

    .why-webdev-matters__stats {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .stats-impact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .impact-stat__icon {
        font-size: 1.4rem;
    }
    .impact-stat__label {
        font-size: 0.78rem;
    }
    .impact-stat__desc {
        font-size: 0.6rem;
    }

    .why-webdev-matters__comparison {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .why-webdev-matters__comparison .comparison-table__header,
    .why-webdev-matters__comparison .comparison-table__row {
        grid-template-columns: 1fr 1fr 1.1fr;
        min-width: 420px;
        font-size: 0.62rem;
        padding: 4px 0;
    }

    .why-webdev-matters__comparison .comparison-table__cell {
        padding: 2px 4px;
    }

    .webdev-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .webdev-cta-banner__title {
        font-size: 1.05rem;
    }
    .webdev-cta-banner__desc {
        font-size: 0.82rem;
    }

    .webdev-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-webdev-start,
    .btn-cta-webdev-portfolio {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .webdev-cta-banner__visual {
        min-height: 100px;
    }

    .wd-cta-icon,
    .ib-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #why-webdev-matters .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .why-webdev-matters__title {
        font-size: 1.5rem;
    }

    .why-webdev-matters__subtitle {
        font-size: 0.8rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .benefit-card {
        padding: 10px 8px 8px;
    }
    .benefit-card__title {
        font-size: 0.72rem;
    }
    .benefit-card__desc {
        font-size: 0.6rem;
    }

    .stats-impact-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 320px;
    }

    .impact-stat__label {
        font-size: 0.72rem;
    }

    .webdev-cta-banner__title {
        font-size: 0.95rem;
    }

    .wd-cta-icon,
    .ib-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .why-webdev-matters__title {
        font-size: 1.3rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .stats-impact-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .impact-stat__label {
        font-size: 0.65rem;
    }

    .webdev-cta-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Why Professional Web Development Matters Responsive
================================================== */

/* ==================================================
START: Web Development Services Overview Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-services {
        padding: 60px 0 40px;
    }

    .webdev-services__header {
        margin-bottom: 36px;
    }

    .webdev-services__title {
        font-size: 2.2rem;
    }

    .webdev-services__subtitle {
        font-size: 0.95rem;
    }

    .webdev-services__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 36px;
    }

    .service-card {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .service-card__title {
        font-size: 0.88rem;
    }
    .service-card__desc {
        font-size: 0.74rem;
    }

    .spotlight-card {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .spotlight-card__content {
        padding: 28px 24px 24px;
        order: 2;
    }

    .spotlight-card__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .spotlight-card__title {
        font-size: 1.2rem;
    }

    .spotlight-card__badge {
        top: 12px;
        left: 16px;
        font-size: 0.55rem;
        padding: 1px 12px;
    }

    .webdev-services__tech {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .tech-item {
        font-size: 0.7rem;
        padding: 3px 12px;
    }
    .tech-item i {
        font-size: 0.8rem;
    }

    .services-cta-bottom {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .services-cta-bottom__content {
        padding: 28px 24px;
        order: 2;
    }

    .services-cta-bottom__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .services-cta-bottom__title {
        font-size: 1.2rem;
    }

    .sp-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-services__orb--1,
    .webdev-services__orb--2 {
        display: none;
    }

    .webdev-services__shape--2 {
        display: none;
    }

    #webdev-services .particle--3,
    #webdev-services .particle--5,
    #webdev-services .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-services {
        padding: 40px 0 30px;
    }

    .webdev-services__header {
        margin-bottom: 28px;
    }

    .webdev-services__title {
        font-size: 1.8rem;
    }

    .webdev-services__subtitle {
        font-size: 0.88rem;
    }

    .webdev-services__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 28px;
    }

    .service-card {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .service-card__icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .service-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }
    .service-card__title {
        font-size: 0.85rem;
    }
    .service-card__desc {
        font-size: 0.72rem;
        margin-bottom: 8px;
    }

    .feature-chip {
        font-size: 0.52rem;
        padding: 1px 8px;
    }

    .service-card__ideal {
        font-size: 0.6rem;
    }

    .service-card__actions {
        flex-direction: column;
        gap: 4px;
    }

    .service-btn {
        font-size: 0.62rem;
        padding: 3px 14px;
        text-align: center;
    }

    .spotlight-card__content {
        padding: 20px 16px 18px;
    }

    .spotlight-card__title {
        font-size: 1.05rem;
    }
    .spotlight-card__desc {
        font-size: 0.82rem;
    }

    .spotlight-card__pillars {
        gap: 3px 6px;
        padding: 4px 0;
    }

    .pillar {
        font-size: 0.6rem;
        padding: 3px 10px;
    }

    .spotlight-card__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-spotlight-discuss,
    .btn-spotlight-process {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    .webdev-services__tech {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .tech-item {
        font-size: 0.65rem;
        padding: 2px 10px;
        gap: 4px;
    }
    .tech-item i {
        font-size: 0.7rem;
    }

    .services-cta-bottom__content {
        padding: 20px 16px 18px;
    }

    .services-cta-bottom__title {
        font-size: 1.05rem;
    }
    .services-cta-bottom__desc {
        font-size: 0.82rem;
    }

    .services-cta-bottom__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-start-project,
    .btn-cta-view-portfolio {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .services-cta-bottom__visual {
        min-height: 100px;
    }

    .services-cta-bottom__visual .s-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .sp-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #webdev-services .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-services__title {
        font-size: 1.5rem;
    }

    .webdev-services__subtitle {
        font-size: 0.8rem;
    }

    .service-card {
        padding: 12px 10px 12px;
    }

    .service-card__icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .service-card__title {
        font-size: 0.78rem;
    }
    .service-card__desc {
        font-size: 0.68rem;
    }

    .feature-chip {
        font-size: 0.48rem;
        padding: 1px 6px;
    }

    .service-btn {
        font-size: 0.58rem;
        padding: 2px 12px;
    }

    .spotlight-card__title {
        font-size: 0.95rem;
    }

    .tech-item {
        font-size: 0.58rem;
        padding: 2px 8px;
    }
    .tech-item i {
        font-size: 0.65rem;
    }

    .services-cta-bottom__title {
        font-size: 0.95rem;
    }

    .services-cta-bottom__visual .s-cta-icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-services__title {
        font-size: 1.3rem;
    }

    .spotlight-card__pillars {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
    }

    .pillar {
        text-align: center;
    }

    .tech-item {
        font-size: 0.52rem;
        padding: 1px 6px;
    }
    .tech-item i {
        font-size: 0.6rem;
    }

    .services-cta-bottom__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Web Development Services Overview Responsive
================================================== */

/* ==================================================
START: Our Web Development Process Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-process {
        padding: 60px 0 40px;
    }

    .webdev-process__header {
        margin-bottom: 36px;
    }

    .webdev-process__title {
        font-size: 2.2rem;
    }

    .webdev-process__subtitle {
        font-size: 0.95rem;
    }

    .webdev-process__timeline {
        padding: 24px 16px 20px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .process-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px 8px;
    }

    .process-timeline::before {
        display: none;
    }

    .timeline-stage {
        padding: 0 4px;
    }

    .timeline-stage__dot {
        width: 36px;
        height: 36px;
        margin-bottom: 6px;
    }
    .stage-number {
        font-size: 0.55rem;
    }
    .stage-label {
        font-size: 0.62rem;
    }

    .webdev-process__details {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .webdev-process__qa {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .qa-workflow {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 8px;
    }

    .qa-workflow::before {
        display: none;
    }

    .qa-step {
        padding: 0 4px;
    }
    .qa-step__number {
        width: 26px;
        height: 26px;
        font-size: 0.5rem;
    }
    .qa-step__label {
        font-size: 0.6rem;
    }

    .webdev-process__collaboration {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .collaboration-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px 10px;
    }

    .process-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .process-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .process-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .process-cta-banner__title {
        font-size: 1.2rem;
    }

    .p-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-process__orb--1,
    .webdev-process__orb--2 {
        display: none;
    }

    .webdev-process__shape--2 {
        display: none;
    }

    #webdev-process .particle--3,
    #webdev-process .particle--5,
    #webdev-process .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-process {
        padding: 40px 0 30px;
    }

    .webdev-process__header {
        margin-bottom: 28px;
    }

    .webdev-process__title {
        font-size: 1.8rem;
    }

    .webdev-process__subtitle {
        font-size: 0.88rem;
    }

    .webdev-process__timeline {
        padding: 16px 12px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .process-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 12px 8px;
    }

    .timeline-stage {
        flex-direction: row;
        gap: 10px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .timeline-stage__dot {
        width: 30px;
        height: 30px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .stage-number {
        font-size: 0.5rem;
    }
    .stage-label {
        font-size: 0.6rem;
    }

    .webdev-process__details {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .stage-detail-card__trigger {
        padding: 10px 12px;
        font-size: 0.78rem;
        gap: 8px;
    }
    .stage-detail-card__number {
        min-width: 24px;
        height: 24px;
        font-size: 0.55rem;
    }
    .stage-detail-card__title {
        font-size: 0.76rem;
    }

    .stage-detail-card__trigger[aria-expanded="true"] + .stage-detail-card__content {
        padding: 0 12px 12px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .detail-group ul li {
        font-size: 0.72rem;
    }
    .detail-collab {
        font-size: 0.7rem;
    }

    .webdev-process__qa {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .qa-workflow {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .qa-step {
        flex-direction: row;
        gap: 10px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .qa-step__number {
        width: 24px;
        height: 24px;
        font-size: 0.45rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .qa-step__label {
        font-size: 0.6rem;
    }

    .webdev-process__collaboration {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .collaboration-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .collab-card {
        padding: 8px 10px;
    }
    .collab-card__icon {
        font-size: 0.9rem;
    }
    .collab-card__label {
        font-size: 0.65rem;
    }

    .process-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .process-cta-banner__title {
        font-size: 1.05rem;
    }
    .process-cta-banner__desc {
        font-size: 0.82rem;
    }

    .process-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-process-start,
    .btn-cta-process-discovery {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .process-cta-banner__visual {
        min-height: 100px;
    }

    .p-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    #webdev-process .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-process__title {
        font-size: 1.5rem;
    }

    .webdev-process__subtitle {
        font-size: 0.8rem;
    }

    .process-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 8px 6px;
    }

    .stage-label {
        font-size: 0.55rem;
    }

    .collaboration-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .collab-card {
        padding: 6px 8px;
    }
    .collab-card__label {
        font-size: 0.6rem;
    }

    .qa-workflow {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }
    .qa-step__label {
        font-size: 0.55rem;
    }

    .process-cta-banner__title {
        font-size: 0.95rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-process__title {
        font-size: 1.3rem;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .collaboration-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .qa-workflow {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .process-cta-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Our Web Development Process Responsive
================================================== */

/* ==================================================
START: Technologies & Frameworks We Use Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-tech-stack {
        padding: 60px 0 40px;
    }

    .webdev-tech-stack__header {
        margin-bottom: 36px;
    }

    .webdev-tech-stack__title {
        font-size: 2.2rem;
    }

    .webdev-tech-stack__subtitle {
        font-size: 0.95rem;
    }

    .webdev-tech-stack__tabs {
        border-radius: 30px;
        padding: 6px 8px;
        margin-bottom: 28px;
        justify-content: center;
    }

    .tech-tab {
        padding: 5px 12px;
        font-size: 0.65rem;
    }

    .webdev-tech-stack__grid {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .tech-category {
        margin-bottom: 22px;
    }
    .tech-category__title {
        font-size: 0.78rem;
    }
    .tech-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }
    .tech-card {
        padding: 10px 12px 10px;
    }
    .tech-card__name {
        font-size: 0.76rem;
    }
    .tech-card__desc {
        font-size: 0.65rem;
    }

    .webdev-tech-stack__architecture {
        padding: 20px 16px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .architecture-flow {
        min-width: 650px;
        gap: 4px;
    }

    .arch-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .arch-node__label {
        font-size: 0.55rem;
    }
    .arch-node__connector {
        right: -6px;
        width: 12px;
    }
    .arch-node__connector::after {
        font-size: 0.5rem;
    }

    .webdev-tech-stack__principles {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px 10px;
    }

    .webdev-tech-stack__metrics {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .webdev-tech-stack__metrics .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .webdev-tech-stack__metrics .metric-stat__number {
        font-size: 1.5rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-suffix {
        font-size: 1.1rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--modern,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--secure,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--optimized,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--scalable {
        font-size: 1.3rem;
    }
    .webdev-tech-stack__metrics .metric-stat__label {
        font-size: 0.65rem;
    }

    .tech-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .tech-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .tech-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .tech-cta-banner__title {
        font-size: 1.2rem;
    }

    .t-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-tech-stack__orb--1,
    .webdev-tech-stack__orb--2 {
        display: none;
    }

    .webdev-tech-stack__shape--2 {
        display: none;
    }

    #webdev-tech-stack .particle--3,
    #webdev-tech-stack .particle--5,
    #webdev-tech-stack .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-tech-stack {
        padding: 40px 0 30px;
    }

    .webdev-tech-stack__header {
        margin-bottom: 28px;
    }

    .webdev-tech-stack__title {
        font-size: 1.8rem;
    }

    .webdev-tech-stack__subtitle {
        font-size: 0.88rem;
    }

    .webdev-tech-stack__tabs {
        border-radius: 16px;
        padding: 4px 6px;
        margin-bottom: 20px;
        gap: 2px;
        justify-content: center;
    }

    .tech-tab {
        padding: 3px 10px;
        font-size: 0.6rem;
        border-radius: 30px;
    }

    .webdev-tech-stack__grid {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .tech-category {
        margin-bottom: 16px;
    }
    .tech-category__title {
        font-size: 0.72rem;
    }
    .tech-cards {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }
    .tech-card {
        padding: 8px 10px 8px;
    }
    .tech-card__icon {
        font-size: 1rem;
    }
    .tech-card__name {
        font-size: 0.7rem;
    }
    .tech-card__desc {
        font-size: 0.6rem;
    }
    .tech-card__benefit {
        font-size: 0.55rem;
        padding: 1px 10px;
    }

    .webdev-tech-stack__architecture {
        padding: 16px 12px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .architecture-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .arch-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .arch-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .arch-node__label {
        font-size: 0.5rem;
    }
    .arch-node__connector {
        display: none;
    }

    .webdev-tech-stack__principles {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .principle-card {
        padding: 6px 10px;
    }
    .principle-card__icon {
        font-size: 0.85rem;
    }
    .principle-card__label {
        font-size: 0.65rem;
    }

    .webdev-tech-stack__metrics {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .webdev-tech-stack__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        max-width: 380px;
        margin: 0 auto;
    }

    .webdev-tech-stack__metrics .metric-stat__number {
        font-size: 1.2rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-suffix {
        font-size: 0.9rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--modern,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--secure,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--optimized,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--scalable {
        font-size: 1rem;
    }
    .webdev-tech-stack__metrics .metric-stat__label {
        font-size: 0.58rem;
    }

    .tech-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .tech-cta-banner__title {
        font-size: 1.05rem;
    }
    .tech-cta-banner__desc {
        font-size: 0.82rem;
    }

    .tech-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-tech-discuss,
    .btn-cta-tech-architect {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .tech-cta-banner__visual {
        min-height: 100px;
    }

    .t-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    #webdev-tech-stack .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-tech-stack__title {
        font-size: 1.5rem;
    }

    .webdev-tech-stack__subtitle {
        font-size: 0.8rem;
    }

    .tech-tab {
        font-size: 0.55rem;
        padding: 2px 8px;
    }

    .webdev-tech-stack__grid {
        padding: 12px 10px 10px;
    }

    .tech-cards {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .tech-card {
        padding: 6px 8px 6px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .principle-card {
        padding: 4px 8px;
    }
    .principle-card__label {
        font-size: 0.6rem;
    }

    .webdev-tech-stack__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 320px;
    }

    .webdev-tech-stack__metrics .metric-stat__number {
        font-size: 1rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-suffix {
        font-size: 0.75rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--modern,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--secure,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--optimized,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--scalable {
        font-size: 0.85rem;
    }
    .webdev-tech-stack__metrics .metric-stat__label {
        font-size: 0.5rem;
    }

    .tech-cta-banner__title {
        font-size: 0.95rem;
    }

    .t-cta-icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-tech-stack__title {
        font-size: 1.3rem;
    }

    .tech-tab {
        font-size: 0.5rem;
        padding: 1px 6px;
    }

    .tech-cards {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .principles-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .webdev-tech-stack__metrics .metrics-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }

    .webdev-tech-stack__metrics .metric-stat__number {
        font-size: 0.85rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-suffix {
        font-size: 0.6rem;
    }
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--modern,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--secure,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--optimized,
    .webdev-tech-stack__metrics .metric-stat__number .stat-label--scalable {
        font-size: 0.7rem;
    }
    .webdev-tech-stack__metrics .metric-stat__label {
        font-size: 0.45rem;
    }

    .tech-cta-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Technologies & Frameworks We Use Responsive
================================================== */

/* ==================================================
START: Types of Websites & Web Applications We Build Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-solutions {
        padding: 60px 0 40px;
    }

    .webdev-solutions__header {
        margin-bottom: 36px;
    }

    .webdev-solutions__title {
        font-size: 2.2rem;
    }

    .webdev-solutions__subtitle {
        font-size: 0.95rem;
    }

    .solution-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .solution-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .solution-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .solution-banner__title {
        font-size: 1.3rem;
    }

    .webdev-solutions__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 36px;
    }

    .solution-card {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .solution-card__title {
        font-size: 0.85rem;
    }
    .solution-card__desc {
        font-size: 0.72rem;
    }

    .webdev-solutions__use-cases {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .usecases-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px 10px;
    }

    .webdev-solutions__benefits {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px 10px;
    }

    .solutions-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .solutions-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .solutions-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .solutions-cta-banner__title {
        font-size: 1.2rem;
    }

    .sb-icon,
    .s-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-solutions__orb--1,
    .webdev-solutions__orb--2 {
        display: none;
    }

    .webdev-solutions__shape--2 {
        display: none;
    }

    #webdev-solutions .particle--3,
    #webdev-solutions .particle--5,
    #webdev-solutions .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-solutions {
        padding: 40px 0 30px;
    }

    .webdev-solutions__header {
        margin-bottom: 28px;
    }

    .webdev-solutions__title {
        font-size: 1.8rem;
    }

    .webdev-solutions__subtitle {
        font-size: 0.88rem;
    }

    .solution-banner__content {
        padding: 20px 16px 18px;
    }

    .solution-banner__title {
        font-size: 1.1rem;
    }
    .solution-banner__desc {
        font-size: 0.82rem;
    }

    .solution-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-solutions-discuss,
    .btn-banner-solutions-explore {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .webdev-solutions__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 28px;
    }

    .solution-card {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .solution-card__icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .solution-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }
    .solution-card__title {
        font-size: 0.82rem;
    }
    .solution-card__desc {
        font-size: 0.7rem;
        margin-bottom: 6px;
    }
    .solution-card__ideal {
        font-size: 0.58rem;
        padding: 1px 10px;
    }

    .feat-chip {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .sol-btn {
        font-size: 0.6rem;
        padding: 3px 14px;
    }

    .webdev-solutions__use-cases {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .usecases-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .usecase-card {
        padding: 6px 10px;
    }
    .usecase-card__icon {
        font-size: 0.85rem;
    }
    .usecase-card__label {
        font-size: 0.65rem;
    }

    .webdev-solutions__benefits {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px 8px;
    }

    .benefit-card {
        padding: 6px 10px;
    }
    .benefit-card__icon {
        font-size: 0.85rem;
    }
    .benefit-card__label {
        font-size: 0.65rem;
    }

    .solutions-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .solutions-cta-banner__title {
        font-size: 1.05rem;
    }
    .solutions-cta-banner__desc {
        font-size: 0.82rem;
    }

    .solutions-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-solutions-consult,
    .btn-cta-solutions-experts {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .solutions-cta-banner__visual {
        min-height: 100px;
    }

    .sb-icon,
    .s-cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #webdev-solutions .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-solutions__title {
        font-size: 1.5rem;
    }

    .webdev-solutions__subtitle {
        font-size: 0.8rem;
    }

    .solution-card {
        padding: 12px 10px 12px;
    }

    .solution-card__icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .solution-card__title {
        font-size: 0.76rem;
    }
    .solution-card__desc {
        font-size: 0.65rem;
    }

    .usecases-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .usecase-card {
        padding: 4px 8px;
    }
    .usecase-card__label {
        font-size: 0.6rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .benefit-card {
        padding: 4px 8px;
    }
    .benefit-card__label {
        font-size: 0.6rem;
    }

    .solutions-cta-banner__title {
        font-size: 0.95rem;
    }

    .sb-icon,
    .s-cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-solutions__title {
        font-size: 1.3rem;
    }

    .usecases-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px 4px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .solutions-cta-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Types of Websites & Web Applications We Build Responsive
================================================== */

/* ==================================================
START: Features Included in Every Website We Build Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-features {
        padding: 60px 0 40px;
    }

    .webdev-features__header {
        margin-bottom: 36px;
    }

    .webdev-features__title {
        font-size: 2.2rem;
    }

    .webdev-features__subtitle {
        font-size: 0.95rem;
    }

    .quality-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .quality-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .quality-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .quality-banner__title {
        font-size: 1.3rem;
    }

    .webdev-features__grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px 14px;
        margin-bottom: 36px;
    }

    .feature-card {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }
    .feature-card__badge {
        top: 8px;
        right: 8px;
        font-size: 0.45rem;
        padding: 0 8px;
    }

    .webdev-features__standards {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .standards-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px 10px;
    }

    .commitment-banner {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .commitment-banner__content {
        flex-direction: column;
        gap: 10px;
    }

    .commitment-banner__actions {
        padding-left: 0;
    }

    .features-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .features-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .features-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .features-cta-banner__title {
        font-size: 1.2rem;
    }

    .qb-icon,
    .f-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-features__orb--1,
    .webdev-features__orb--2 {
        display: none;
    }

    .webdev-features__shape--2 {
        display: none;
    }

    #webdev-features .particle--3,
    #webdev-features .particle--5,
    #webdev-features .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-features {
        padding: 40px 0 30px;
    }

    .webdev-features__header {
        margin-bottom: 28px;
    }

    .webdev-features__title {
        font-size: 1.8rem;
    }

    .webdev-features__subtitle {
        font-size: 0.88rem;
    }

    .quality-banner__content {
        padding: 20px 16px 18px;
    }

    .quality-banner__title {
        font-size: 1.1rem;
    }
    .quality-banner__desc {
        font-size: 0.82rem;
    }

    .quality-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-features-start,
    .btn-banner-features-discuss {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .webdev-features__grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        margin-bottom: 28px;
    }

    .feature-card {
        padding: 12px 10px 10px;
        border-radius: 12px;
    }
    .feature-card__icon {
        font-size: 1.1rem;
    }
    .feature-card__title {
        font-size: 0.76rem;
    }
    .feature-card__benefit {
        font-size: 0.6rem;
    }
    .feature-card__desc {
        font-size: 0.62rem;
    }
    .feature-card__badge {
        display: none;
    }

    .webdev-features__standards {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .standards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .standard-card {
        padding: 8px 10px;
    }
    .standard-card__icon {
        font-size: 1rem;
    }
    .standard-card__label {
        font-size: 0.65rem;
    }
    .standard-card__desc {
        font-size: 0.55rem;
    }

    .commitment-banner {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .commitment-banner__icon {
        font-size: 1.8rem;
    }
    .commitment-banner__title {
        font-size: 1rem;
    }
    .commitment-banner__desc {
        font-size: 0.8rem;
    }

    .commitment-banner__actions {
        flex-direction: column;
        gap: 8px;
        padding-left: 0;
    }

    .btn-commitment-maintenance,
    .btn-commitment-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .features-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .features-cta-banner__title {
        font-size: 1.05rem;
    }
    .features-cta-banner__desc {
        font-size: 0.82rem;
    }

    .features-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-features-proposal,
    .btn-cta-features-discovery {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .features-cta-banner__visual {
        min-height: 100px;
    }

    .qb-icon,
    .f-cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #webdev-features .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-features__title {
        font-size: 1.5rem;
    }

    .webdev-features__subtitle {
        font-size: 0.8rem;
    }

    .webdev-features__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .feature-card {
        padding: 8px 8px 8px;
    }
    .feature-card__icon {
        font-size: 0.95rem;
    }
    .feature-card__title {
        font-size: 0.7rem;
    }
    .feature-card__benefit {
        font-size: 0.55rem;
    }
    .feature-card__desc {
        font-size: 0.55rem;
    }

    .standards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .standard-card {
        padding: 6px 8px;
    }
    .standard-card__label {
        font-size: 0.6rem;
    }
    .standard-card__desc {
        font-size: 0.5rem;
    }

    .commitment-banner__title {
        font-size: 0.9rem;
    }

    .features-cta-banner__title {
        font-size: 0.95rem;
    }

    .qb-icon,
    .f-cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-features__title {
        font-size: 1.3rem;
    }

    .webdev-features__grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .standards-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .features-cta-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Features Included in Every Website We Build Responsive
================================================== */

/* ==================================================
START: Industries We Build Websites For Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-industries {
        padding: 60px 0 40px;
    }

    .webdev-industries__header {
        margin-bottom: 36px;
    }

    .webdev-industries__title {
        font-size: 2.2rem;
    }

    .webdev-industries__subtitle {
        font-size: 0.95rem;
    }

    .industry-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .industry-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .industry-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .industry-banner__title {
        font-size: 1.3rem;
    }

    .webdev-industries__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 36px;
    }

    .industry-solution-card {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .industry-solution-card__title {
        font-size: 0.85rem;
    }
    .industry-solution-card__desc {
        font-size: 0.72rem;
    }

    .webdev-industries__challenges {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .challenges-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px 12px;
    }

    .webdev-industries__values {
        padding: 18px 18px 16px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .values-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px 10px;
    }

    .industries-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .industries-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .industries-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .industries-cta-banner__title {
        font-size: 1.2rem;
    }

    .ib-icon,
    .i-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-industries__orb--1,
    .webdev-industries__orb--2 {
        display: none;
    }

    .webdev-industries__shape--2 {
        display: none;
    }

    #webdev-industries .particle--3,
    #webdev-industries .particle--5,
    #webdev-industries .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-industries {
        padding: 40px 0 30px;
    }

    .webdev-industries__header {
        margin-bottom: 28px;
    }

    .webdev-industries__title {
        font-size: 1.8rem;
    }

    .webdev-industries__subtitle {
        font-size: 0.88rem;
    }

    .industry-banner__content {
        padding: 20px 16px 18px;
    }

    .industry-banner__title {
        font-size: 1.1rem;
    }
    .industry-banner__desc {
        font-size: 0.82rem;
    }

    .industry-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-industry-discuss,
    .btn-banner-industry-explore {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .webdev-industries__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 28px;
    }

    .industry-solution-card {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .industry-solution-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
        border-radius: 10px;
    }
    .industry-solution-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }
    .industry-solution-card__title {
        font-size: 0.8rem;
    }
    .industry-solution-card__desc {
        font-size: 0.68rem;
    }

    .need-tag {
        font-size: 0.55rem;
        padding: 1px 8px;
    }
    .ind-feat {
        font-size: 0.5rem;
        padding: 0 8px;
    }

    .ind-btn {
        font-size: 0.6rem;
        padding: 3px 12px;
    }

    .webdev-industries__challenges {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .challenges-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .challenge-solution {
        padding: 8px 6px;
    }
    .cs-icon {
        font-size: 1rem;
    }
    .cs-label {
        font-size: 0.6rem;
    }

    .webdev-industries__values {
        padding: 14px 14px 12px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .value-card {
        padding: 6px 10px;
    }
    .value-card__icon {
        font-size: 0.85rem;
    }
    .value-card__label {
        font-size: 0.65rem;
    }

    .industries-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .industries-cta-banner__title {
        font-size: 1.05rem;
    }
    .industries-cta-banner__desc {
        font-size: 0.82rem;
    }

    .industries-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-industries-consult,
    .btn-cta-industries-start {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .industries-cta-banner__visual {
        min-height: 100px;
    }

    .ib-icon,
    .i-cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #webdev-industries .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-industries__title {
        font-size: 1.5rem;
    }

    .webdev-industries__subtitle {
        font-size: 0.8rem;
    }

    .webdev-industries__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .industry-solution-card {
        padding: 12px 10px 10px;
    }
    .industry-solution-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    .industry-solution-card__title {
        font-size: 0.76rem;
    }
    .industry-solution-card__desc {
        font-size: 0.65rem;
    }

    .challenges-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .challenge-solution {
        padding: 6px 4px;
    }
    .cs-label {
        font-size: 0.55rem;
    }

    .values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px 6px;
    }

    .value-card {
        padding: 4px 8px;
    }
    .value-card__label {
        font-size: 0.6rem;
    }

    .industries-cta-banner__title {
        font-size: 0.95rem;
    }

    .ib-icon,
    .i-cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-industries__title {
        font-size: 1.3rem;
    }

    .challenges-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .industries-cta-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Industries We Build Websites For Responsive
================================================== */

/* ==================================================
START: Portfolio & Case Studies Preview Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-portfolio-preview {
        padding: 60px 0 40px;
    }

    .webdev-portfolio-preview__header {
        margin-bottom: 36px;
    }

    .webdev-portfolio-preview__title {
        font-size: 2.2rem;
    }

    .webdev-portfolio-preview__subtitle {
        font-size: 0.95rem;
    }

    .featured-project {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .featured-project__image {
        min-height: 180px;
        order: 1;
    }

    .featured-project__content {
        padding: 24px 24px 20px;
        order: 2;
    }

    .featured-project__title {
        font-size: 1.15rem;
    }
    .featured-project__details {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .webdev-portfolio-preview__cards {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .project-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .webdev-portfolio-preview__case-studies {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .case-studies-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .portfolio-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .portfolio-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .portfolio-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .portfolio-cta-banner__title {
        font-size: 1.2rem;
    }

    .p-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-portfolio-preview__orb--1,
    .webdev-portfolio-preview__orb--2 {
        display: none;
    }

    .webdev-portfolio-preview__shape--2 {
        display: none;
    }

    #webdev-portfolio-preview .particle--3,
    #webdev-portfolio-preview .particle--5,
    #webdev-portfolio-preview .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-portfolio-preview {
        padding: 40px 0 30px;
    }

    .webdev-portfolio-preview__header {
        margin-bottom: 28px;
    }

    .webdev-portfolio-preview__title {
        font-size: 1.8rem;
    }

    .webdev-portfolio-preview__subtitle {
        font-size: 0.88rem;
    }

    .featured-project__image {
        min-height: 140px;
    }

    .featured-project__placeholder .placeholder-icon {
        font-size: 2rem;
    }
    .featured-project__placeholder .placeholder-label {
        font-size: 0.7rem;
    }

    .featured-project__content {
        padding: 18px 16px 16px;
    }

    .featured-project__title {
        font-size: 1rem;
    }
    .featured-project__details {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .featured-project__details .detail-block__text {
        font-size: 0.76rem;
    }

    .featured-project__tech {
        gap: 3px 4px;
    }
    .featured-project__tech .tech-badge {
        font-size: 0.55rem;
        padding: 1px 10px;
    }

    .btn-featured-view,
    .btn-featured-case {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .webdev-portfolio-preview__cards {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .project-cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .project-card__image {
        min-height: 44px;
        padding: 14px 12px 10px;
    }
    .project-card__placeholder {
        font-size: 1.4rem;
    }
    .project-card__title {
        font-size: 0.8rem;
    }
    .project-card__desc {
        font-size: 0.65rem;
    }

    .webdev-portfolio-preview__case-studies {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .case-study-card {
        padding: 10px 12px;
        gap: 10px;
    }
    .case-study-card__number {
        font-size: 1rem;
    }
    .case-study-card__title {
        font-size: 0.65rem;
    }
    .case-study-card__desc {
        font-size: 0.65rem;
    }
    .case-study-card__solution {
        font-size: 0.62rem;
    }

    .portfolio-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .portfolio-cta-banner__title {
        font-size: 1.05rem;
    }
    .portfolio-cta-banner__desc {
        font-size: 0.82rem;
    }

    .portfolio-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-portfolio-view,
    .btn-cta-portfolio-cases {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .portfolio-cta-banner__visual {
        min-height: 100px;
    }

    .p-cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .featured-project__badges {
        top: 10px;
        left: 10px;
        gap: 4px;
    }
    .badge-category,
    .badge-industry {
        font-size: 0.5rem;
        padding: 2px 10px;
    }
    .featured-project__status {
        font-size: 0.5rem;
        padding: 2px 10px;
        bottom: 10px;
        right: 10px;
    }

    #webdev-portfolio-preview .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-portfolio-preview__title {
        font-size: 1.5rem;
    }

    .webdev-portfolio-preview__subtitle {
        font-size: 0.8rem;
    }

    .project-card {
        padding: 0;
    }
    .project-card__body {
        padding: 10px 12px 12px;
    }
    .project-card__title {
        font-size: 0.76rem;
    }

    .case-study-card {
        padding: 8px 10px;
        flex-direction: column;
        gap: 6px;
    }

    .portfolio-cta-banner__title {
        font-size: 0.95rem;
    }

    .p-cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-portfolio-preview__title {
        font-size: 1.3rem;
    }

    .portfolio-cta-banner__title {
        font-size: 0.85rem;
    }

    .case-study-card__title {
        font-size: 0.6rem;
    }
    .case-study-card__desc {
        font-size: 0.6rem;
    }
    .case-study-card__solution {
        font-size: 0.58rem;
    }
}

/* ==================================================
END: Portfolio & Case Studies Preview Responsive
================================================== */

/* ==================================================
START: Web Development FAQ & Final CTA Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #webdev-faq-final {
        padding: 60px 0 40px;
    }

    .webdev-faq-final__header {
        margin-bottom: 36px;
    }

    .webdev-faq-final__title {
        font-size: 2.2rem;
    }

    .webdev-faq-final__subtitle {
        font-size: 0.95rem;
    }

    .webdev-faq-final__layout {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 36px;
    }

    .webdev-faq-final__faq {
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .webdev-faq-final__contact {
        position: static;
    }

    .contact-panel {
        padding: 24px 24px 20px;
        border-radius: 16px;
    }

    .contact-panel__features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
    }

    .final-conversion-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-conversion-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-conversion-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .final-conversion-banner__title {
        font-size: 1.2rem;
    }

    .fc-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .webdev-faq-final__orb--1,
    .webdev-faq-final__orb--2 {
        display: none;
    }

    .webdev-faq-final__shape--2 {
        display: none;
    }

    #webdev-faq-final .particle--3,
    #webdev-faq-final .particle--5,
    #webdev-faq-final .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #webdev-faq-final {
        padding: 40px 0 30px;
    }

    .webdev-faq-final__header {
        margin-bottom: 28px;
    }

    .webdev-faq-final__title {
        font-size: 1.8rem;
    }

    .webdev-faq-final__subtitle {
        font-size: 0.88rem;
    }

    .faq-item__trigger {
        padding: 10px 14px;
        font-size: 0.78rem;
        gap: 8px;
    }

    .faq-item__question {
        font-size: 0.78rem;
    }

    .faq-item__content {
        font-size: 0.76rem;
        padding: 0 14px;
    }

    .faq-item__trigger[aria-expanded="true"] + .faq-item__content {
        padding: 0 14px 14px;
    }

    .contact-panel {
        padding: 18px 16px 16px;
        border-radius: 14px;
    }

    .contact-panel__icon {
        font-size: 1.8rem;
    }
    .contact-panel__title {
        font-size: 1rem;
    }
    .contact-panel__desc {
        font-size: 0.82rem;
    }

    .contact-panel__features {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .feature-item {
        font-size: 0.72rem;
    }

    .btn-contact-proposal,
    .btn-contact-consult {
        padding: 8px 18px;
        font-size: 0.8rem;
    }

    .final-conversion-banner__content {
        padding: 20px 16px 18px;
    }

    .final-conversion-banner__title {
        font-size: 1.05rem;
    }
    .final-conversion-banner__desc {
        font-size: 0.82rem;
    }

    .final-conversion-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-final-start,
    .btn-cta-final-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .final-conversion-banner__visual {
        min-height: 100px;
    }

    .fc-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #webdev-faq-final .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .webdev-faq-final__title {
        font-size: 1.5rem;
    }

    .webdev-faq-final__subtitle {
        font-size: 0.8rem;
    }

    .webdev-faq-final__faq {
        padding: 14px 12px 12px;
        border-radius: 14px;
    }

    .faq-item__trigger {
        padding: 8px 12px;
        font-size: 0.74rem;
    }
    .faq-item__question {
        font-size: 0.74rem;
    }
    .faq-item__content {
        font-size: 0.72rem;
        padding: 0 12px;
    }
    .faq-item__trigger[aria-expanded="true"] + .faq-item__content {
        padding: 0 12px 12px;
    }

    .contact-panel {
        padding: 14px 12px 12px;
    }

    .final-conversion-banner__title {
        font-size: 0.95rem;
    }

    .fc-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .webdev-faq-final__title {
        font-size: 1.3rem;
    }

    .final-conversion-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Web Development FAQ & Final CTA Responsive
================================================== */

/* ==================================================
START: Privacy Policy Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-hero {
        padding: 30px 0 50px;
        min-height: auto;
    }

    .privacy-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .privacy-hero__title {
        font-size: 2.4rem;
    }

    .privacy-hero__subtitle {
        max-width: 100%;
    }

    .privacy-hero__meta {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .meta-card {
        padding: 8px 12px;
    }
    .meta-card__value {
        font-size: 0.76rem;
    }

    .privacy-hero__visual {
        min-height: 400px;
        order: -1;
    }

    .hero-visual {
        height: 400px;
        max-width: 100%;
    }

    .glass-shield {
        width: 140px;
        height: 160px;
    }
    .glass-shield .shield-icon {
        font-size: 3.5rem;
    }
    .glass-shield .lock-icon {
        font-size: 1.8rem;
    }

    .data-node {
        font-size: 0.4rem;
    }

    .privacy-hero__orb--1,
    .privacy-hero__orb--2 {
        display: none;
    }

    .privacy-hero__shape--2 {
        display: none;
    }

    #privacy-hero .particle--3,
    #privacy-hero .particle--5,
    #privacy-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-hero {
        padding: 20px 0 40px;
    }

    .privacy-hero__title {
        font-size: 1.8rem;
    }

    .privacy-hero__subtitle {
        font-size: 0.9rem;
    }

    .privacy-hero__meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .meta-card {
        padding: 8px 12px;
        border-radius: 10px;
    }

    .privacy-hero__actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-privacy-contact,
    .btn-privacy-home {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .privacy-hero__trust {
        gap: 4px 10px;
    }

    .privacy-hero__trust .trust-badge {
        font-size: 0.65rem;
        padding: 3px 10px 3px 8px;
    }
    .privacy-hero__trust .trust-badge i {
        font-size: 0.7rem;
    }

    .privacy-hero__visual {
        min-height: 320px;
    }

    .hero-visual {
        height: 320px;
    }

    .glass-shield {
        width: 110px;
        height: 130px;
        border-radius: 20px 20px 35px 35px;
    }
    .glass-shield .shield-icon {
        font-size: 2.8rem;
    }
    .glass-shield .lock-icon {
        font-size: 1.4rem;
    }

    .data-node {
        display: none;
    }
    .visual-connections {
        display: none;
    }

    .orb {
        display: none;
    }

    #privacy-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-hero__title {
        font-size: 1.5rem;
    }

    .privacy-hero__subtitle {
        font-size: 0.8rem;
    }

    .privacy-hero__visual {
        min-height: 260px;
    }

    .hero-visual {
        height: 260px;
    }

    .glass-shield {
        width: 90px;
        height: 100px;
        border-radius: 15px 15px 25px 25px;
    }
    .glass-shield .shield-icon {
        font-size: 2.2rem;
    }
    .glass-shield .lock-icon {
        font-size: 1.1rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-hero__title {
        font-size: 1.3rem;
    }

    .privacy-hero__visual {
        min-height: 220px;
    }

    .hero-visual {
        height: 220px;
    }

    .glass-shield {
        width: 70px;
        height: 80px;
    }
    .glass-shield .shield-icon {
        font-size: 1.8rem;
    }
    .glass-shield .lock-icon {
        font-size: 0.9rem;
    }
}

/* ==================================================
END: Privacy Policy Hero Banner Responsive
================================================== */

/* ==================================================
START: Privacy Overview & Our Commitment Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-overview {
        padding: 60px 0 40px;
    }

    .privacy-overview__header {
        margin-bottom: 36px;
    }

    .privacy-overview__title {
        font-size: 2.2rem;
    }

    .privacy-overview__subtitle {
        font-size: 0.95rem;
    }

    .commitment-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .commitment-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .commitment-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .commitment-banner__title {
        font-size: 1.3rem;
    }

    .privacy-overview__principles {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .privacy-overview__summary {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .summary-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .info-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }

    .info-banner__content {
        flex-direction: column;
        text-align: center;
    }

    .info-banner__desc {
        max-width: 100%;
    }

    .btn-banner-read-policy {
        width: 100%;
        justify-content: center;
    }

    .cb-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .privacy-overview__orb--1,
    .privacy-overview__orb--2 {
        display: none;
    }

    .privacy-overview__shape--2 {
        display: none;
    }

    #privacy-overview .particle--3,
    #privacy-overview .particle--5,
    #privacy-overview .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-overview {
        padding: 40px 0 30px;
    }

    .privacy-overview__header {
        margin-bottom: 28px;
    }

    .privacy-overview__title {
        font-size: 1.8rem;
    }

    .privacy-overview__subtitle {
        font-size: 0.88rem;
    }

    .commitment-banner__content {
        padding: 20px 16px 18px;
    }

    .commitment-banner__title {
        font-size: 1.1rem;
    }
    .commitment-banner__desc {
        font-size: 0.82rem;
    }

    .commitment-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-contact,
    .btn-banner-view {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .privacy-overview__principles {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .principle-card {
        padding: 12px 12px 12px;
    }
    .principle-card__icon {
        font-size: 1.1rem;
    }
    .principle-card__title {
        font-size: 0.78rem;
    }
    .principle-card__desc {
        font-size: 0.65rem;
    }

    .privacy-overview__summary {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .summary-card {
        padding: 12px 12px 12px;
    }
    .summary-card__icon {
        font-size: 1.1rem;
    }
    .summary-card__title {
        font-size: 0.76rem;
    }
    .summary-card__desc {
        font-size: 0.65rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    .info-banner {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .info-banner__icon {
        font-size: 1.8rem;
    }
    .info-banner__title {
        font-size: 0.95rem;
    }
    .info-banner__desc {
        font-size: 0.78rem;
    }

    .btn-banner-read-policy {
        font-size: 0.8rem;
        padding: 8px 20px;
    }

    .cb-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    #privacy-overview .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-overview__title {
        font-size: 1.5rem;
    }

    .privacy-overview__subtitle {
        font-size: 0.8rem;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .principle-card {
        padding: 10px 8px 10px;
    }
    .principle-card__title {
        font-size: 0.72rem;
    }
    .principle-card__desc {
        font-size: 0.6rem;
    }

    .summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .summary-card {
        padding: 10px 8px 10px;
    }
    .summary-card__title {
        font-size: 0.7rem;
    }
    .summary-card__desc {
        font-size: 0.6rem;
    }

    .info-banner__title {
        font-size: 0.88rem;
    }
    .info-banner__desc {
        font-size: 0.72rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-overview__title {
        font-size: 1.3rem;
    }

    .principles-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .summary-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .info-banner__title {
        font-size: 0.8rem;
    }
}

/* ==================================================
END: Privacy Overview & Our Commitment Responsive
================================================== */

/* ==================================================
START: Information We Collect Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-collect {
        padding: 60px 0 40px;
    }

    .privacy-collect__header {
        margin-bottom: 36px;
    }

    .privacy-collect__title {
        font-size: 2.2rem;
    }

    .privacy-collect__subtitle {
        font-size: 0.95rem;
    }

    .info-banner-collect {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .info-banner-collect__content {
        padding: 28px 24px;
        order: 2;
    }

    .info-banner-collect__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .info-banner-collect__title {
        font-size: 1.3rem;
    }

    .privacy-collect__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .category-card {
        padding: 14px 12px 12px;
    }
    .category-card__title {
        font-size: 0.78rem;
    }
    .category-card__desc {
        font-size: 0.68rem;
    }

    .privacy-collect__sources {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .sources-timeline {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px 8px;
    }

    .sources-timeline::before {
        display: none;
    }

    .source-step {
        padding: 0 4px;
    }
    .source-step__number {
        width: 26px;
        height: 26px;
        font-size: 0.5rem;
    }
    .source-step__label {
        font-size: 0.6rem;
    }
    .source-step__desc {
        font-size: 0.55rem;
    }

    .notice-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner__desc {
        max-width: 100%;
    }

    .ic-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .privacy-collect__orb--1,
    .privacy-collect__orb--2 {
        display: none;
    }

    .privacy-collect__shape--2 {
        display: none;
    }

    #privacy-collect .particle--3,
    #privacy-collect .particle--5,
    #privacy-collect .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-collect {
        padding: 40px 0 30px;
    }

    .privacy-collect__header {
        margin-bottom: 28px;
    }

    .privacy-collect__title {
        font-size: 1.8rem;
    }

    .privacy-collect__subtitle {
        font-size: 0.88rem;
    }

    .info-banner-collect__content {
        padding: 20px 16px 18px;
    }

    .info-banner-collect__title {
        font-size: 1.1rem;
    }
    .info-banner-collect__desc {
        font-size: 0.82rem;
    }

    .info-banner-collect__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-collect-contact,
    .btn-banner-collect-question {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .privacy-collect__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .category-card {
        padding: 12px 10px 10px;
    }
    .category-card__icon {
        font-size: 1.1rem;
    }
    .category-card__title {
        font-size: 0.74rem;
    }
    .category-card__desc {
        font-size: 0.64rem;
    }
    .cat-chip {
        font-size: 0.52rem;
        padding: 1px 8px;
    }

    .privacy-collect__sources {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .sources-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 8px 6px;
    }

    .source-step {
        flex-direction: row;
        gap: 10px;
        text-align: left;
        padding: 4px 0;
        align-items: center;
    }

    .source-step__number {
        width: 24px;
        height: 24px;
        font-size: 0.45rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .source-step__label {
        font-size: 0.6rem;
    }
    .source-step__desc {
        font-size: 0.52rem;
        margin-top: 0;
    }

    .notice-banner {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner__icon {
        font-size: 1.6rem;
    }
    .notice-banner__title {
        font-size: 0.9rem;
    }
    .notice-banner__desc {
        font-size: 0.76rem;
    }
    .notice-banner__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ic-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #privacy-collect .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-collect__title {
        font-size: 1.5rem;
    }

    .privacy-collect__subtitle {
        font-size: 0.8rem;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .category-card {
        padding: 10px 8px 8px;
    }
    .category-card__title {
        font-size: 0.7rem;
    }
    .category-card__desc {
        font-size: 0.6rem;
    }
    .cat-chip {
        font-size: 0.48rem;
        padding: 1px 6px;
    }

    .sources-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }
    .source-step__label {
        font-size: 0.55rem;
    }
    .source-step__desc {
        font-size: 0.48rem;
    }

    .notice-banner__title {
        font-size: 0.82rem;
    }
    .notice-banner__desc {
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-collect__title {
        font-size: 1.3rem;
    }

    .categories-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .sources-timeline {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Information We Collect Responsive
================================================== */

/* ==================================================
START: How We Use Your Information Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-use {
        padding: 60px 0 40px;
    }

    .privacy-use__header {
        margin-bottom: 36px;
    }

    .privacy-use__title {
        font-size: 2.2rem;
    }

    .privacy-use__subtitle {
        font-size: 0.95rem;
    }

    .purpose-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .purpose-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .purpose-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .purpose-banner__title {
        font-size: 1.3rem;
    }

    .privacy-use__purposes {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .purposes-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .purpose-card {
        padding: 14px 12px 12px;
    }
    .purpose-card__title {
        font-size: 0.78rem;
    }
    .purpose-card__desc {
        font-size: 0.68rem;
    }

    .privacy-use__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .flow-diagram {
        min-width: 600px;
        gap: 4px;
    }

    .flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .flow-node__label {
        font-size: 0.55rem;
    }
    .flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .flow-node__connector::after {
        font-size: 0.5rem;
    }

    .commitment-banner-use {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .commitment-banner-use__content {
        flex-direction: column;
        text-align: center;
    }

    .commitment-banner-use__desc {
        max-width: 100%;
    }

    .pu-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .privacy-use__orb--1,
    .privacy-use__orb--2 {
        display: none;
    }

    .privacy-use__shape--2 {
        display: none;
    }

    #privacy-use .particle--3,
    #privacy-use .particle--5,
    #privacy-use .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-use {
        padding: 40px 0 30px;
    }

    .privacy-use__header {
        margin-bottom: 28px;
    }

    .privacy-use__title {
        font-size: 1.8rem;
    }

    .privacy-use__subtitle {
        font-size: 0.88rem;
    }

    .purpose-banner__content {
        padding: 20px 16px 18px;
    }

    .purpose-banner__title {
        font-size: 1.1rem;
    }
    .purpose-banner__desc {
        font-size: 0.82rem;
    }

    .purpose-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-use-contact,
    .btn-banner-use-security {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .privacy-use__purposes {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .purposes-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .purpose-card {
        padding: 12px 10px 10px;
    }
    .purpose-card__icon {
        font-size: 1.1rem;
    }
    .purpose-card__title {
        font-size: 0.74rem;
    }
    .purpose-card__desc {
        font-size: 0.64rem;
    }
    .purpose-card__benefit {
        font-size: 0.58rem;
        padding: 1px 10px;
    }

    .privacy-use__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .flow-diagram {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .flow-node__label {
        font-size: 0.5rem;
    }
    .flow-node__connector {
        display: none;
    }

    .commitment-banner-use {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .commitment-banner-use__icon {
        font-size: 1.8rem;
    }
    .commitment-banner-use__title {
        font-size: 0.9rem;
    }
    .commitment-banner-use__desc {
        font-size: 0.76rem;
    }
    .commitment-banner-use__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .pu-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #privacy-use .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-use__title {
        font-size: 1.5rem;
    }

    .privacy-use__subtitle {
        font-size: 0.8rem;
    }

    .purposes-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .purpose-card {
        padding: 10px 8px 8px;
    }
    .purpose-card__title {
        font-size: 0.7rem;
    }
    .purpose-card__desc {
        font-size: 0.6rem;
    }
    .purpose-card__benefit {
        font-size: 0.55rem;
        padding: 1px 8px;
    }

    .commitment-banner-use__title {
        font-size: 0.82rem;
    }
    .commitment-banner-use__desc {
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-use__title {
        font-size: 1.3rem;
    }

    .purposes-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .commitment-banner-use__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: How We Use Your Information Responsive
================================================== */

/* ==================================================
START: Cookies & Tracking Technologies Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-cookies {
        padding: 60px 0 40px;
    }

    .privacy-cookies__header {
        margin-bottom: 36px;
    }

    .privacy-cookies__title {
        font-size: 2.2rem;
    }

    .privacy-cookies__subtitle {
        font-size: 0.95rem;
    }

    .cookies-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .cookies-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .cookies-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .cookies-banner__title {
        font-size: 1.3rem;
    }

    .privacy-cookies__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .cookie-categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .cookie-card {
        padding: 14px 12px 12px;
    }
    .cookie-card__title {
        font-size: 0.78rem;
    }
    .cookie-card__purpose {
        font-size: 0.68rem;
    }
    .cookie-chip {
        font-size: 0.52rem;
        padding: 1px 8px;
    }

    .privacy-cookies__lifecycle {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .lifecycle-diagram {
        min-width: 600px;
        gap: 4px;
    }

    .lifecycle-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .lifecycle-node__label {
        font-size: 0.55rem;
    }
    .lifecycle-node__connector {
        right: -6px;
        width: 12px;
    }
    .lifecycle-node__connector::after {
        font-size: 0.5rem;
    }

    .privacy-cookies__preferences {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .preferences-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px 10px;
    }

    .preference-card {
        padding: 12px 12px 12px;
    }
    .preference-card__title {
        font-size: 0.76rem;
    }
    .preference-card__desc {
        font-size: 0.66rem;
    }

    .info-banner-cookies {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .info-banner-cookies__content {
        flex-direction: column;
        text-align: center;
    }

    .info-banner-cookies__desc {
        max-width: 100%;
    }

    .ck-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .privacy-cookies__orb--1,
    .privacy-cookies__orb--2 {
        display: none;
    }

    .privacy-cookies__shape--2 {
        display: none;
    }

    #privacy-cookies .particle--3,
    #privacy-cookies .particle--5,
    #privacy-cookies .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-cookies {
        padding: 40px 0 30px;
    }

    .privacy-cookies__header {
        margin-bottom: 28px;
    }

    .privacy-cookies__title {
        font-size: 1.8rem;
    }

    .privacy-cookies__subtitle {
        font-size: 0.88rem;
    }

    .cookies-banner__content {
        padding: 20px 16px 18px;
    }

    .cookies-banner__title {
        font-size: 1.1rem;
    }
    .cookies-banner__desc {
        font-size: 0.82rem;
    }

    .cookies-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-cookies-contact,
    .btn-banner-cookies-privacy {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .privacy-cookies__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .cookie-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .cookie-card {
        padding: 12px 10px 10px;
    }
    .cookie-card__icon {
        font-size: 1.1rem;
    }
    .cookie-card__title {
        font-size: 0.74rem;
    }
    .cookie-card__purpose {
        font-size: 0.64rem;
    }
    .cookie-chip {
        font-size: 0.48rem;
        padding: 1px 6px;
    }
    .cookie-card__badge {
        font-size: 0.48rem;
        padding: 1px 10px;
    }

    .privacy-cookies__lifecycle {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .lifecycle-diagram {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .lifecycle-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .lifecycle-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .lifecycle-node__label {
        font-size: 0.5rem;
    }
    .lifecycle-node__connector {
        display: none;
    }

    .privacy-cookies__preferences {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .preferences-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .preference-card {
        padding: 10px 10px 10px;
    }
    .preference-card__icon {
        font-size: 1rem;
    }
    .preference-card__title {
        font-size: 0.72rem;
    }
    .preference-card__desc {
        font-size: 0.62rem;
    }

    .info-banner-cookies {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .info-banner-cookies__icon {
        font-size: 1.6rem;
    }
    .info-banner-cookies__title {
        font-size: 0.9rem;
    }
    .info-banner-cookies__desc {
        font-size: 0.76rem;
    }
    .info-banner-cookies__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ck-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #privacy-cookies .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-cookies__title {
        font-size: 1.5rem;
    }

    .privacy-cookies__subtitle {
        font-size: 0.8rem;
    }

    .cookie-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .cookie-card {
        padding: 10px 8px 8px;
    }
    .cookie-card__title {
        font-size: 0.7rem;
    }
    .cookie-card__purpose {
        font-size: 0.6rem;
    }

    .preferences-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .preference-card {
        padding: 8px 8px 8px;
    }
    .preference-card__title {
        font-size: 0.68rem;
    }
    .preference-card__desc {
        font-size: 0.58rem;
    }

    .info-banner-cookies__title {
        font-size: 0.82rem;
    }
    .info-banner-cookies__desc {
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-cookies__title {
        font-size: 1.3rem;
    }

    .cookie-categories-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .preferences-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .info-banner-cookies__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Cookies & Tracking Technologies Responsive
================================================== */

/* ==================================================
START: Data Sharing & Third-Party Services Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-sharing {
        padding: 60px 0 40px;
    }

    .privacy-sharing__header {
        margin-bottom: 36px;
    }

    .privacy-sharing__title {
        font-size: 2.2rem;
    }

    .privacy-sharing__subtitle {
        font-size: 0.95rem;
    }

    .sharing-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .sharing-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .sharing-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .sharing-banner__title {
        font-size: 1.3rem;
    }

    .privacy-sharing__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .sharing-categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .sharing-card {
        padding: 14px 12px 12px;
    }
    .sharing-card__title {
        font-size: 0.78rem;
    }
    .sharing-card__purpose {
        font-size: 0.68rem;
    }
    .share-chip {
        font-size: 0.52rem;
        padding: 1px 8px;
    }

    .privacy-sharing__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .share-flow-diagram {
        min-width: 600px;
        gap: 4px;
    }

    .share-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .share-flow-node__label {
        font-size: 0.55rem;
    }
    .share-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .share-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .privacy-sharing__trust {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .trust-panel-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px 10px;
    }

    .trust-card {
        padding: 12px 12px 12px;
    }
    .trust-card__title {
        font-size: 0.76rem;
    }
    .trust-card__desc {
        font-size: 0.66rem;
    }

    .info-banner-sharing {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .info-banner-sharing__content {
        flex-direction: column;
        text-align: center;
    }

    .info-banner-sharing__desc {
        max-width: 100%;
    }

    .sh-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .privacy-sharing__orb--1,
    .privacy-sharing__orb--2 {
        display: none;
    }

    .privacy-sharing__shape--2 {
        display: none;
    }

    #privacy-sharing .particle--3,
    #privacy-sharing .particle--5,
    #privacy-sharing .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-sharing {
        padding: 40px 0 30px;
    }

    .privacy-sharing__header {
        margin-bottom: 28px;
    }

    .privacy-sharing__title {
        font-size: 1.8rem;
    }

    .privacy-sharing__subtitle {
        font-size: 0.88rem;
    }

    .sharing-banner__content {
        padding: 20px 16px 18px;
    }

    .sharing-banner__title {
        font-size: 1.1rem;
    }
    .sharing-banner__desc {
        font-size: 0.82rem;
    }

    .sharing-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-sharing-contact,
    .btn-banner-sharing-question {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .privacy-sharing__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .sharing-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .sharing-card {
        padding: 12px 10px 10px;
    }
    .sharing-card__icon {
        font-size: 1.1rem;
    }
    .sharing-card__title {
        font-size: 0.74rem;
    }
    .sharing-card__purpose {
        font-size: 0.64rem;
    }
    .share-chip {
        font-size: 0.48rem;
        padding: 1px 6px;
    }

    .privacy-sharing__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .share-flow-diagram {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .share-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .share-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .share-flow-node__label {
        font-size: 0.5rem;
    }
    .share-flow-node__connector {
        display: none;
    }

    .privacy-sharing__trust {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .trust-panel-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .trust-card {
        padding: 10px 10px 10px;
    }
    .trust-card__icon {
        font-size: 1rem;
    }
    .trust-card__title {
        font-size: 0.72rem;
    }
    .trust-card__desc {
        font-size: 0.62rem;
    }

    .info-banner-sharing {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .info-banner-sharing__icon {
        font-size: 1.6rem;
    }
    .info-banner-sharing__title {
        font-size: 0.9rem;
    }
    .info-banner-sharing__desc {
        font-size: 0.76rem;
    }
    .info-banner-sharing__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .sh-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #privacy-sharing .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-sharing__title {
        font-size: 1.5rem;
    }

    .privacy-sharing__subtitle {
        font-size: 0.8rem;
    }

    .sharing-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .sharing-card {
        padding: 10px 8px 8px;
    }
    .sharing-card__title {
        font-size: 0.7rem;
    }
    .sharing-card__purpose {
        font-size: 0.6rem;
    }

    .trust-panel-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .trust-card {
        padding: 8px 8px 8px;
    }
    .trust-card__title {
        font-size: 0.68rem;
    }
    .trust-card__desc {
        font-size: 0.58rem;
    }

    .info-banner-sharing__title {
        font-size: 0.82rem;
    }
    .info-banner-sharing__desc {
        font-size: 0.7rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-sharing__title {
        font-size: 1.3rem;
    }

    .sharing-categories-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .trust-panel-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .info-banner-sharing__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Data Sharing & Third-Party Services Responsive
================================================== */

/* ==================================================
START: Data Security, Retention & Your Privacy Rights Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-security-rights {
        padding: 60px 0 40px;
    }

    .privacy-security-rights__header {
        margin-bottom: 36px;
    }

    .privacy-security-rights__title {
        font-size: 2.2rem;
    }

    .privacy-security-rights__subtitle {
        font-size: 0.95rem;
    }

    .security-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .security-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .security-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .security-banner__title {
        font-size: 1.3rem;
    }

    .privacy-security-rights__measures {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .security-measures-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .measure-card {
        padding: 14px 12px 12px;
    }
    .measure-card__title {
        font-size: 0.76rem;
    }
    .measure-card__desc {
        font-size: 0.64rem;
    }

    .privacy-security-rights__retention {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .retention-timeline::before {
        left: 16px;
    }

    .retention-step {
        gap: 14px;
    }
    .retention-step__number {
        min-width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }
    .retention-step__label {
        font-size: 0.76rem;
    }
    .retention-step__desc {
        font-size: 0.68rem;
    }

    .privacy-security-rights__rights {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .rights-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px 10px;
    }

    .right-card {
        padding: 12px 12px 12px;
    }
    .right-card__title {
        font-size: 0.76rem;
    }
    .right-card__desc {
        font-size: 0.66rem;
    }

    .privacy-security-rights__process {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .request-flow {
        min-width: 600px;
        gap: 4px;
    }

    .request-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .request-node__label {
        font-size: 0.55rem;
    }
    .request-node__connector {
        right: -6px;
        width: 12px;
    }
    .request-node__connector::after {
        font-size: 0.5rem;
    }

    .rights-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .rights-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .rights-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .rights-cta-banner__title {
        font-size: 1.2rem;
    }

    .sec-icon,
    .r-cta-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .privacy-security-rights__orb--1,
    .privacy-security-rights__orb--2 {
        display: none;
    }

    .privacy-security-rights__shape--2 {
        display: none;
    }

    #privacy-security-rights .particle--3,
    #privacy-security-rights .particle--5,
    #privacy-security-rights .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-security-rights {
        padding: 40px 0 30px;
    }

    .privacy-security-rights__header {
        margin-bottom: 28px;
    }

    .privacy-security-rights__title {
        font-size: 1.8rem;
    }

    .privacy-security-rights__subtitle {
        font-size: 0.88rem;
    }

    .security-banner__content {
        padding: 20px 16px 18px;
    }

    .security-banner__title {
        font-size: 1.1rem;
    }
    .security-banner__desc {
        font-size: 0.82rem;
    }

    .security-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-security-contact,
    .btn-banner-security-question {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .privacy-security-rights__measures {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .security-measures-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .measure-card {
        padding: 12px 10px 10px;
    }
    .measure-card__icon {
        font-size: 1.1rem;
    }
    .measure-card__title {
        font-size: 0.72rem;
    }
    .measure-card__desc {
        font-size: 0.6rem;
    }

    .privacy-security-rights__retention {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .retention-timeline::before {
        left: 14px;
    }

    .retention-step {
        gap: 12px;
        padding: 6px 0;
    }
    .retention-step__number {
        min-width: 26px;
        height: 26px;
        font-size: 0.55rem;
    }
    .retention-step__label {
        font-size: 0.72rem;
    }
    .retention-step__desc {
        font-size: 0.62rem;
    }

    .retention-timeline__note {
        font-size: 0.7rem;
        padding: 10px 12px;
    }

    .privacy-security-rights__rights {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .rights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .right-card {
        padding: 10px 10px 10px;
    }
    .right-card__icon {
        font-size: 1rem;
    }
    .right-card__title {
        font-size: 0.72rem;
    }
    .right-card__desc {
        font-size: 0.62rem;
    }

    .privacy-security-rights__process {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .request-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .request-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .request-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .request-node__label {
        font-size: 0.5rem;
    }
    .request-node__connector {
        display: none;
    }

    .rights-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .rights-cta-banner__title {
        font-size: 1.05rem;
    }
    .rights-cta-banner__desc {
        font-size: 0.82rem;
    }

    .rights-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-rights-contact,
    .btn-cta-rights-visit {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .rights-cta-banner__visual {
        min-height: 100px;
    }

    .sec-icon,
    .r-cta-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #privacy-security-rights .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-security-rights__title {
        font-size: 1.5rem;
    }

    .privacy-security-rights__subtitle {
        font-size: 0.8rem;
    }

    .security-measures-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .measure-card {
        padding: 10px 8px 8px;
    }
    .measure-card__title {
        font-size: 0.68rem;
    }
    .measure-card__desc {
        font-size: 0.56rem;
    }

    .rights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
    }

    .right-card {
        padding: 8px 8px 8px;
    }
    .right-card__title {
        font-size: 0.68rem;
    }
    .right-card__desc {
        font-size: 0.58rem;
    }

    .retention-step__label {
        font-size: 0.68rem;
    }
    .retention-step__desc {
        font-size: 0.58rem;
    }

    .rights-cta-banner__title {
        font-size: 0.95rem;
    }

    .sec-icon,
    .r-cta-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-security-rights__title {
        font-size: 1.3rem;
    }

    .security-measures-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .rights-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .rights-cta-banner__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Data Security, Retention & Your Privacy Rights Responsive
================================================== */

/* ==================================================
START: Policy Updates, Contact Information & Final Notice Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #privacy-final {
        padding: 60px 0 40px;
    }

    .privacy-final__header {
        margin-bottom: 36px;
    }

    .privacy-final__title {
        font-size: 2.2rem;
    }

    .privacy-final__subtitle {
        font-size: 0.95rem;
    }

    .updates-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .updates-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .updates-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .updates-banner__title {
        font-size: 1.3rem;
    }

    .privacy-final__timeline {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .policy-timeline::before {
        left: 16px;
    }

    .policy-step {
        gap: 14px;
    }
    .policy-step__number {
        min-width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }
    .policy-step__label {
        font-size: 0.76rem;
    }
    .policy-step__desc {
        font-size: 0.68rem;
    }

    .privacy-final__contact {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .contact-final-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .contact-final-card {
        padding: 14px 14px 14px;
    }
    .contact-final-card__value {
        font-size: 0.78rem;
    }

    .notice-final-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
        margin-bottom: 36px;
    }

    .notice-final-banner__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-final-banner__desc {
        max-width: 100%;
    }

    .final-privacy-cta {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-privacy-cta__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-privacy-cta__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .final-privacy-cta__title {
        font-size: 1.2rem;
    }

    .up-icon,
    .fp-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .privacy-final__orb--1,
    .privacy-final__orb--2 {
        display: none;
    }

    .privacy-final__shape--2 {
        display: none;
    }

    #privacy-final .particle--3,
    #privacy-final .particle--5,
    #privacy-final .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #privacy-final {
        padding: 40px 0 30px;
    }

    .privacy-final__header {
        margin-bottom: 28px;
    }

    .privacy-final__title {
        font-size: 1.8rem;
    }

    .privacy-final__subtitle {
        font-size: 0.88rem;
    }

    .updates-banner__content {
        padding: 20px 16px 18px;
    }

    .updates-banner__title {
        font-size: 1.1rem;
    }
    .updates-banner__desc {
        font-size: 0.82rem;
    }

    .updates-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-updates-contact,
    .btn-banner-updates-home {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .privacy-final__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .policy-timeline::before {
        left: 14px;
    }

    .policy-step {
        gap: 12px;
        padding: 6px 0;
    }
    .policy-step__number {
        min-width: 26px;
        height: 26px;
        font-size: 0.55rem;
    }
    .policy-step__label {
        font-size: 0.72rem;
    }
    .policy-step__desc {
        font-size: 0.62rem;
    }

    .privacy-final__contact {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .contact-final-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .contact-final-card {
        padding: 12px 12px 12px;
    }
    .contact-final-card__icon {
        font-size: 1.1rem;
    }
    .contact-final-card__value {
        font-size: 0.74rem;
    }
    .contact-final-card__btn {
        font-size: 0.58rem;
        padding: 2px 12px;
    }

    .notice-final-banner {
        padding: 16px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .notice-final-banner__icon {
        font-size: 1.8rem;
    }
    .notice-final-banner__title {
        font-size: 0.9rem;
    }
    .notice-final-banner__desc {
        font-size: 0.76rem;
    }
    .notice-final-banner__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .final-privacy-cta__content {
        padding: 20px 16px 18px;
    }

    .final-privacy-cta__title {
        font-size: 1.05rem;
    }
    .final-privacy-cta__desc {
        font-size: 0.82rem;
    }

    .final-privacy-cta__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-privacy-final-contact,
    .btn-cta-privacy-final-chat {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .final-privacy-cta__visual {
        min-height: 100px;
    }

    .up-icon,
    .fp-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #privacy-final .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .privacy-final__title {
        font-size: 1.5rem;
    }

    .privacy-final__subtitle {
        font-size: 0.8rem;
    }

    .contact-final-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .contact-final-card {
        padding: 10px 10px 10px;
    }
    .contact-final-card__value {
        font-size: 0.7rem;
    }

    .policy-step__label {
        font-size: 0.68rem;
    }
    .policy-step__desc {
        font-size: 0.58rem;
    }

    .notice-final-banner__title {
        font-size: 0.82rem;
    }
    .notice-final-banner__desc {
        font-size: 0.7rem;
    }

    .final-privacy-cta__title {
        font-size: 0.95rem;
    }

    .up-icon,
    .fp-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .privacy-final__title {
        font-size: 1.3rem;
    }

    .contact-final-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .final-privacy-cta__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Policy Updates, Contact Information & Final Notice Responsive
================================================== */

/* ==================================================
START: Terms & Conditions Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #terms-hero {
        padding: 30px 0 50px;
        min-height: auto;
    }

    .terms-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .terms-hero__title {
        font-size: 2.4rem;
    }

    .terms-hero__subtitle {
        max-width: 100%;
    }

    .terms-hero__meta {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .terms-hero__meta .meta-card {
        padding: 8px 12px;
    }
    .terms-hero__meta .meta-card__value {
        font-size: 0.76rem;
    }

    .terms-hero__visual {
        min-height: 400px;
        order: -1;
    }

    .hero-visual {
        height: 400px;
        max-width: 100%;
    }

    .glass-document {
        width: 140px;
        height: 170px;
    }
    .glass-document .document-icon {
        font-size: 2.2rem;
    }
    .glass-document .document-check {
        font-size: 1.1rem;
    }
    .glass-document .document-shield {
        font-size: 1.1rem;
    }
    .glass-document .document-lines .line {
        height: 2px;
    }

    .float-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .terms-hero__orb--1,
    .terms-hero__orb--2 {
        display: none;
    }

    .terms-hero__shape--2 {
        display: none;
    }

    #terms-hero .particle--3,
    #terms-hero .particle--5,
    #terms-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #terms-hero {
        padding: 20px 0 40px;
    }

    .terms-hero__title {
        font-size: 1.8rem;
    }

    .terms-hero__subtitle {
        font-size: 0.9rem;
    }

    .terms-hero__meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .terms-hero__meta .meta-card {
        padding: 8px 12px;
        border-radius: 10px;
    }

    .terms-hero__actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-terms-contact,
    .btn-terms-home {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .terms-hero__trust {
        gap: 4px 10px;
    }

    .terms-hero__trust .trust-badge {
        font-size: 0.65rem;
        padding: 3px 10px 3px 8px;
    }
    .terms-hero__trust .trust-badge i {
        font-size: 0.7rem;
    }

    .terms-hero__visual {
        min-height: 320px;
    }

    .hero-visual {
        height: 320px;
    }

    .glass-document {
        width: 110px;
        height: 130px;
        border-radius: 12px;
        padding: 14px;
    }
    .glass-document .document-icon {
        font-size: 1.6rem;
        margin-bottom: 4px;
    }
    .glass-document .document-lines {
        gap: 4px;
    }
    .glass-document .document-lines .line {
        height: 2px;
    }
    .glass-document .document-check {
        font-size: 0.9rem;
        bottom: 10px;
        right: 10px;
    }
    .glass-document .document-shield {
        font-size: 0.9rem;
        top: 10px;
        left: 10px;
    }

    .float-icon {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .visual-connections {
        display: none;
    }

    .orb {
        display: none;
    }

    #terms-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .terms-hero__title {
        font-size: 1.5rem;
    }

    .terms-hero__subtitle {
        font-size: 0.8rem;
    }

    .terms-hero__visual {
        min-height: 260px;
    }

    .hero-visual {
        height: 260px;
    }

    .glass-document {
        width: 90px;
        height: 110px;
        padding: 10px;
        border-radius: 10px;
    }
    .glass-document .document-icon {
        font-size: 1.3rem;
    }
    .glass-document .document-lines {
        gap: 3px;
    }
    .glass-document .document-lines .line {
        height: 2px;
    }
    .glass-document .document-check {
        font-size: 0.7rem;
        bottom: 6px;
        right: 6px;
    }
    .glass-document .document-shield {
        font-size: 0.7rem;
        top: 6px;
        left: 6px;
    }

    .float-icon {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .terms-hero__title {
        font-size: 1.3rem;
    }

    .terms-hero__visual {
        min-height: 220px;
    }

    .hero-visual {
        height: 220px;
    }

    .glass-document {
        width: 70px;
        height: 90px;
        padding: 8px;
    }
    .glass-document .document-icon {
        font-size: 1rem;
    }
    .glass-document .document-lines {
        gap: 2px;
    }
    .glass-document .document-lines .line {
        height: 1.5px;
    }
    .glass-document .document-check,
    .glass-document .document-shield {
        display: none;
    }
}

/* ==================================================
END: Terms & Conditions Hero Banner Responsive
================================================== */

/* ==================================================
START: Agreement Overview & Acceptance Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #terms-overview {
        padding: 60px 0 40px;
    }

    .terms-overview__header {
        margin-bottom: 36px;
    }

    .terms-overview__title {
        font-size: 2.2rem;
    }

    .terms-overview__subtitle {
        font-size: 0.95rem;
    }

    .agreement-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .agreement-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .agreement-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .agreement-banner__title {
        font-size: 1.3rem;
    }

    .terms-overview__principles {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .principle-card {
        padding: 14px 14px 14px;
    }
    .principle-card__icon {
        font-size: 1.2rem;
    }
    .principle-card__title {
        font-size: 0.78rem;
    }
    .principle-card__desc {
        font-size: 0.68rem;
    }

    .terms-overview__timeline {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .acceptance-timeline::before {
        left: 16px;
    }

    .acceptance-step {
        gap: 14px;
    }
    .acceptance-step__number {
        min-width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }
    .acceptance-step__label {
        font-size: 0.76rem;
    }
    .acceptance-step__desc {
        font-size: 0.68rem;
    }

    .notice-banner-terms {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-terms__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-terms__desc {
        max-width: 100%;
    }

    .ag-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .terms-overview__orb--1,
    .terms-overview__orb--2 {
        display: none;
    }

    .terms-overview__shape--2 {
        display: none;
    }

    #terms-overview .particle--3,
    #terms-overview .particle--5,
    #terms-overview .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #terms-overview {
        padding: 40px 0 30px;
    }

    .terms-overview__header {
        margin-bottom: 28px;
    }

    .terms-overview__title {
        font-size: 1.8rem;
    }

    .terms-overview__subtitle {
        font-size: 0.88rem;
    }

    .agreement-banner__content {
        padding: 20px 16px 18px;
    }

    .agreement-banner__title {
        font-size: 1.1rem;
    }
    .agreement-banner__desc {
        font-size: 0.82rem;
    }

    .agreement-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-agreement-contact,
    .btn-banner-agreement-services {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .terms-overview__principles {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .principle-card {
        padding: 12px 12px 12px;
    }
    .principle-card__icon {
        font-size: 1.1rem;
    }
    .principle-card__title {
        font-size: 0.74rem;
    }
    .principle-card__desc {
        font-size: 0.64rem;
    }

    .terms-overview__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .acceptance-timeline::before {
        left: 14px;
    }

    .acceptance-step {
        gap: 12px;
        padding: 6px 0;
    }
    .acceptance-step__number {
        min-width: 26px;
        height: 26px;
        font-size: 0.55rem;
    }
    .acceptance-step__label {
        font-size: 0.72rem;
    }
    .acceptance-step__desc {
        font-size: 0.62rem;
    }

    .notice-banner-terms {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-terms__icon {
        font-size: 1.6rem;
    }
    .notice-banner-terms__title {
        font-size: 0.9rem;
    }
    .notice-banner-terms__desc {
        font-size: 0.76rem;
    }
    .notice-banner-terms__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ag-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #terms-overview .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .terms-overview__title {
        font-size: 1.5rem;
    }

    .terms-overview__subtitle {
        font-size: 0.8rem;
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .principle-card {
        padding: 10px 10px 10px;
    }
    .principle-card__title {
        font-size: 0.7rem;
    }
    .principle-card__desc {
        font-size: 0.6rem;
    }

    .acceptance-step__label {
        font-size: 0.68rem;
    }
    .acceptance-step__desc {
        font-size: 0.58rem;
    }

    .notice-banner-terms__title {
        font-size: 0.82rem;
    }
    .notice-banner-terms__desc {
        font-size: 0.7rem;
    }

    .ag-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .terms-overview__title {
        font-size: 1.3rem;
    }

    .principles-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-terms__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Agreement Overview & Acceptance Responsive
================================================== */

/* ==================================================
START: Website Use & User Responsibilities Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #terms-use {
        padding: 60px 0 40px;
    }

    .terms-use__header {
        margin-bottom: 36px;
    }

    .terms-use__title {
        font-size: 2.2rem;
    }

    .terms-use__subtitle {
        font-size: 0.95rem;
    }

    .use-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .use-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .use-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .use-banner__title {
        font-size: 1.3rem;
    }

    .terms-use__responsibilities {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .responsibilities-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .resp-card {
        padding: 14px 14px 14px;
    }
    .resp-card__icon {
        font-size: 1.1rem;
    }
    .resp-card__title {
        font-size: 0.76rem;
    }
    .resp-card__desc {
        font-size: 0.66rem;
    }

    .terms-use__prohibited {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .prohibited-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .prohibited-card {
        padding: 14px 14px 14px;
    }
    .prohibited-card__icon {
        font-size: 1rem;
    }
    .prohibited-card__title {
        font-size: 0.76rem;
    }
    .prohibited-card__desc {
        font-size: 0.66rem;
    }

    .terms-use__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .use-flow {
        min-width: 600px;
        gap: 4px;
    }

    .use-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .use-flow-node__label {
        font-size: 0.55rem;
    }
    .use-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .use-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .notice-banner-use {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-use__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-use__desc {
        max-width: 100%;
    }

    .ub-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .terms-use__orb--1,
    .terms-use__orb--2 {
        display: none;
    }

    .terms-use__shape--2 {
        display: none;
    }

    #terms-use .particle--3,
    #terms-use .particle--5,
    #terms-use .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #terms-use {
        padding: 40px 0 30px;
    }

    .terms-use__header {
        margin-bottom: 28px;
    }

    .terms-use__title {
        font-size: 1.8rem;
    }

    .terms-use__subtitle {
        font-size: 0.88rem;
    }

    .use-banner__content {
        padding: 20px 16px 18px;
    }

    .use-banner__title {
        font-size: 1.1rem;
    }
    .use-banner__desc {
        font-size: 0.82rem;
    }

    .use-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-use-explore,
    .btn-banner-use-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .terms-use__responsibilities {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .responsibilities-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .resp-card {
        padding: 12px 12px 12px;
    }
    .resp-card__icon {
        font-size: 1rem;
    }
    .resp-card__title {
        font-size: 0.72rem;
    }
    .resp-card__desc {
        font-size: 0.62rem;
    }

    .terms-use__prohibited {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .prohibited-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .prohibited-card {
        padding: 12px 12px 12px;
        flex-direction: column;
    }
    .prohibited-card__icon {
        font-size: 1rem;
    }
    .prohibited-card__title {
        font-size: 0.72rem;
    }
    .prohibited-card__desc {
        font-size: 0.62rem;
    }
    .prohibited-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
        margin-top: 4px;
    }

    .terms-use__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .use-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .use-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .use-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .use-flow-node__label {
        font-size: 0.5rem;
    }
    .use-flow-node__connector {
        display: none;
    }

    .notice-banner-use {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-use__icon {
        font-size: 1.6rem;
    }
    .notice-banner-use__title {
        font-size: 0.9rem;
    }
    .notice-banner-use__desc {
        font-size: 0.76rem;
    }
    .notice-banner-use__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ub-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #terms-use .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .terms-use__title {
        font-size: 1.5rem;
    }

    .terms-use__subtitle {
        font-size: 0.8rem;
    }

    .responsibilities-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .resp-card {
        padding: 10px 10px 10px;
    }
    .resp-card__title {
        font-size: 0.68rem;
    }
    .resp-card__desc {
        font-size: 0.58rem;
    }

    .prohibited-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .prohibited-card {
        padding: 10px 10px 10px;
    }
    .prohibited-card__title {
        font-size: 0.68rem;
    }
    .prohibited-card__desc {
        font-size: 0.58rem;
    }

    .notice-banner-use__title {
        font-size: 0.82rem;
    }
    .notice-banner-use__desc {
        font-size: 0.7rem;
    }

    .ub-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .terms-use__title {
        font-size: 1.3rem;
    }

    .responsibilities-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .prohibited-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-use__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Website Use & User Responsibilities Responsive
================================================== */

/* ==================================================
START: Services, Quotes & Payments Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #terms-services-payments {
        padding: 60px 0 40px;
    }

    .terms-services-payments__header {
        margin-bottom: 36px;
    }

    .terms-services-payments__title {
        font-size: 2.2rem;
    }

    .terms-services-payments__subtitle {
        font-size: 0.95rem;
    }

    .service-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .service-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .service-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .service-banner__title {
        font-size: 1.3rem;
    }

    .terms-services-payments__timeline {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .service-timeline::before {
        left: 16px;
    }

    .service-step {
        gap: 14px;
    }
    .service-step__number {
        min-width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }
    .service-step__label {
        font-size: 0.76rem;
    }
    .service-step__desc {
        font-size: 0.68rem;
    }

    .terms-services-payments__terms {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .terms-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .term-card {
        padding: 14px 14px 12px;
    }
    .term-card__icon {
        font-size: 1.1rem;
    }
    .term-card__title {
        font-size: 0.74rem;
    }
    .term-card__desc {
        font-size: 0.66rem;
    }

    .terms-services-payments__payment {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .payment-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .payment-card {
        padding: 14px 14px 12px;
    }
    .payment-card__icon {
        font-size: 1.1rem;
    }
    .payment-card__title {
        font-size: 0.74rem;
    }
    .payment-card__desc {
        font-size: 0.66rem;
    }

    .notice-banner-services {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-services__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-services__desc {
        max-width: 100%;
    }

    .sv-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .terms-services-payments__orb--1,
    .terms-services-payments__orb--2 {
        display: none;
    }

    .terms-services-payments__shape--2 {
        display: none;
    }

    #terms-services-payments .particle--3,
    #terms-services-payments .particle--5,
    #terms-services-payments .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #terms-services-payments {
        padding: 40px 0 30px;
    }

    .terms-services-payments__header {
        margin-bottom: 28px;
    }

    .terms-services-payments__title {
        font-size: 1.8rem;
    }

    .terms-services-payments__subtitle {
        font-size: 0.88rem;
    }

    .service-banner__content {
        padding: 20px 16px 18px;
    }

    .service-banner__title {
        font-size: 1.1rem;
    }
    .service-banner__desc {
        font-size: 0.82rem;
    }

    .service-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-service-quote,
    .btn-banner-service-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .terms-services-payments__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .service-timeline::before {
        left: 14px;
    }

    .service-step {
        gap: 12px;
        padding: 6px 0;
    }
    .service-step__number {
        min-width: 26px;
        height: 26px;
        font-size: 0.55rem;
    }
    .service-step__label {
        font-size: 0.72rem;
    }
    .service-step__desc {
        font-size: 0.62rem;
    }

    .terms-services-payments__terms {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .terms-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .term-card {
        padding: 12px 12px 10px;
    }
    .term-card__icon {
        font-size: 1rem;
    }
    .term-card__title {
        font-size: 0.7rem;
    }
    .term-card__desc {
        font-size: 0.62rem;
    }

    .terms-services-payments__payment {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .payment-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .payment-card {
        padding: 12px 12px 10px;
    }
    .payment-card__icon {
        font-size: 1rem;
    }
    .payment-card__title {
        font-size: 0.7rem;
    }
    .payment-card__desc {
        font-size: 0.62rem;
    }

    .notice-banner-services {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-services__icon {
        font-size: 1.6rem;
    }
    .notice-banner-services__title {
        font-size: 0.9rem;
    }
    .notice-banner-services__desc {
        font-size: 0.76rem;
    }
    .notice-banner-services__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .sv-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #terms-services-payments .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .terms-services-payments__title {
        font-size: 1.5rem;
    }

    .terms-services-payments__subtitle {
        font-size: 0.8rem;
    }

    .terms-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .term-card {
        padding: 10px 10px 8px;
    }
    .term-card__title {
        font-size: 0.66rem;
    }
    .term-card__desc {
        font-size: 0.58rem;
    }

    .payment-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .payment-card {
        padding: 10px 10px 8px;
    }
    .payment-card__title {
        font-size: 0.66rem;
    }
    .payment-card__desc {
        font-size: 0.58rem;
    }

    .service-step__label {
        font-size: 0.68rem;
    }
    .service-step__desc {
        font-size: 0.58rem;
    }

    .notice-banner-services__title {
        font-size: 0.82rem;
    }
    .notice-banner-services__desc {
        font-size: 0.7rem;
    }

    .sv-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .terms-services-payments__title {
        font-size: 1.3rem;
    }

    .terms-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .payment-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-services__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Services, Quotes & Payments Responsive
================================================== */

/* ==================================================
START: Intellectual Property & Content Ownership Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #terms-ip {
        padding: 60px 0 40px;
    }

    .terms-ip__header {
        margin-bottom: 36px;
    }

    .terms-ip__title {
        font-size: 2.2rem;
    }

    .terms-ip__subtitle {
        font-size: 0.95rem;
    }

    .ip-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .ip-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .ip-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .ip-banner__title {
        font-size: 1.3rem;
    }

    .terms-ip__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .ip-categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .ip-category-card {
        padding: 14px 14px 12px;
    }
    .ip-category-card__icon {
        font-size: 1.1rem;
    }
    .ip-category-card__title {
        font-size: 0.74rem;
    }
    .ip-category-card__desc {
        font-size: 0.66rem;
    }

    .terms-ip__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .ip-flow {
        min-width: 600px;
        gap: 4px;
    }

    .ip-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .ip-flow-node__label {
        font-size: 0.55rem;
    }
    .ip-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .ip-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .terms-ip__licensing {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .licensing-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .license-card {
        padding: 14px 14px 12px;
    }
    .license-card__icon {
        font-size: 1.1rem;
    }
    .license-card__title {
        font-size: 0.74rem;
    }
    .license-card__desc {
        font-size: 0.66rem;
    }

    .notice-banner-ip {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-ip__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-ip__desc {
        max-width: 100%;
    }

    .ip-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .terms-ip__orb--1,
    .terms-ip__orb--2 {
        display: none;
    }

    .terms-ip__shape--2 {
        display: none;
    }

    #terms-ip .particle--3,
    #terms-ip .particle--5,
    #terms-ip .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #terms-ip {
        padding: 40px 0 30px;
    }

    .terms-ip__header {
        margin-bottom: 28px;
    }

    .terms-ip__title {
        font-size: 1.8rem;
    }

    .terms-ip__subtitle {
        font-size: 0.88rem;
    }

    .ip-banner__content {
        padding: 20px 16px 18px;
    }

    .ip-banner__title {
        font-size: 1.1rem;
    }
    .ip-banner__desc {
        font-size: 0.82rem;
    }

    .ip-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-ip-contact,
    .btn-banner-ip-services {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .terms-ip__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .ip-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .ip-category-card {
        padding: 12px 12px 10px;
    }
    .ip-category-card__icon {
        font-size: 1rem;
    }
    .ip-category-card__title {
        font-size: 0.7rem;
    }
    .ip-category-card__desc {
        font-size: 0.62rem;
    }

    .terms-ip__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .ip-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .ip-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .ip-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .ip-flow-node__label {
        font-size: 0.5rem;
    }
    .ip-flow-node__connector {
        display: none;
    }

    .terms-ip__licensing {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .licensing-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .license-card {
        padding: 12px 12px 10px;
    }
    .license-card__icon {
        font-size: 1rem;
    }
    .license-card__title {
        font-size: 0.7rem;
    }
    .license-card__desc {
        font-size: 0.62rem;
    }

    .notice-banner-ip {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-ip__icon {
        font-size: 1.6rem;
    }
    .notice-banner-ip__title {
        font-size: 0.9rem;
    }
    .notice-banner-ip__desc {
        font-size: 0.76rem;
    }
    .notice-banner-ip__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ip-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #terms-ip .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .terms-ip__title {
        font-size: 1.5rem;
    }

    .terms-ip__subtitle {
        font-size: 0.8rem;
    }

    .ip-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .ip-category-card {
        padding: 10px 10px 8px;
    }
    .ip-category-card__title {
        font-size: 0.66rem;
    }
    .ip-category-card__desc {
        font-size: 0.58rem;
    }

    .licensing-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .license-card {
        padding: 10px 10px 8px;
    }
    .license-card__title {
        font-size: 0.66rem;
    }
    .license-card__desc {
        font-size: 0.58rem;
    }

    .notice-banner-ip__title {
        font-size: 0.82rem;
    }
    .notice-banner-ip__desc {
        font-size: 0.7rem;
    }

    .ip-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .terms-ip__title {
        font-size: 1.3rem;
    }

    .ip-categories-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .licensing-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-ip__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Intellectual Property & Content Ownership Responsive
================================================== */

/* ==================================================
START: Warranties, Liability & Third-Party Services Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #terms-liability {
        padding: 60px 0 40px;
    }

    .terms-liability__header {
        margin-bottom: 36px;
    }

    .terms-liability__title {
        font-size: 2.2rem;
    }

    .terms-liability__subtitle {
        font-size: 0.95rem;
    }

    .liability-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .liability-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .liability-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .liability-banner__title {
        font-size: 1.3rem;
    }

    .terms-liability__grid {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .liability-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .liability-card {
        padding: 14px 14px 14px;
    }
    .liability-card__icon {
        font-size: 1.1rem;
    }
    .liability-card__title {
        font-size: 0.76rem;
    }
    .liability-card__desc {
        font-size: 0.66rem;
    }

    .terms-liability__thirdparty {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .thirdparty-flow {
        min-width: 600px;
        gap: 4px;
    }

    .thirdparty-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .thirdparty-node__label {
        font-size: 0.55rem;
    }
    .thirdparty-node__connector {
        right: -6px;
        width: 12px;
    }
    .thirdparty-node__connector::after {
        font-size: 0.5rem;
    }

    .thirdparty-tag {
        font-size: 0.65rem;
        padding: 3px 12px;
    }
    .thirdparty-note {
        font-size: 0.72rem;
    }

    .terms-liability__force {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .force-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .force-card {
        padding: 12px 12px 12px;
    }
    .force-card__icon {
        font-size: 1.2rem;
    }
    .force-card__title {
        font-size: 0.76rem;
    }
    .force-card__desc {
        font-size: 0.64rem;
    }

    .notice-banner-liability {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-liability__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-liability__desc {
        max-width: 100%;
    }

    .lb-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .terms-liability__orb--1,
    .terms-liability__orb--2 {
        display: none;
    }

    .terms-liability__shape--2 {
        display: none;
    }

    #terms-liability .particle--3,
    #terms-liability .particle--5,
    #terms-liability .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #terms-liability {
        padding: 40px 0 30px;
    }

    .terms-liability__header {
        margin-bottom: 28px;
    }

    .terms-liability__title {
        font-size: 1.8rem;
    }

    .terms-liability__subtitle {
        font-size: 0.88rem;
    }

    .liability-banner__content {
        padding: 20px 16px 18px;
    }

    .liability-banner__title {
        font-size: 1.1rem;
    }
    .liability-banner__desc {
        font-size: 0.82rem;
    }

    .liability-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-liability-contact,
    .btn-banner-liability-services {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .terms-liability__grid {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .liability-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .liability-card {
        padding: 12px 12px 12px;
    }
    .liability-card__icon {
        font-size: 1rem;
    }
    .liability-card__title {
        font-size: 0.72rem;
    }
    .liability-card__desc {
        font-size: 0.62rem;
    }

    .terms-liability__thirdparty {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .thirdparty-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .thirdparty-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .thirdparty-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .thirdparty-node__label {
        font-size: 0.5rem;
    }
    .thirdparty-node__connector {
        display: none;
    }

    .thirdparty-examples {
        gap: 4px 8px;
    }
    .thirdparty-tag {
        font-size: 0.6rem;
        padding: 2px 10px;
    }
    .thirdparty-note {
        font-size: 0.68rem;
        padding: 8px 12px;
    }

    .terms-liability__force {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .force-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .force-card {
        padding: 10px 10px 10px;
    }
    .force-card__icon {
        font-size: 1.1rem;
    }
    .force-card__title {
        font-size: 0.7rem;
    }
    .force-card__desc {
        font-size: 0.6rem;
    }

    .notice-banner-liability {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-liability__icon {
        font-size: 1.6rem;
    }
    .notice-banner-liability__title {
        font-size: 0.9rem;
    }
    .notice-banner-liability__desc {
        font-size: 0.76rem;
    }
    .notice-banner-liability__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .lb-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #terms-liability .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .terms-liability__title {
        font-size: 1.5rem;
    }

    .terms-liability__subtitle {
        font-size: 0.8rem;
    }

    .liability-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .liability-card {
        padding: 10px 10px 10px;
    }
    .liability-card__title {
        font-size: 0.68rem;
    }
    .liability-card__desc {
        font-size: 0.58rem;
    }

    .force-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .force-card {
        padding: 8px 8px 8px;
    }
    .force-card__title {
        font-size: 0.66rem;
    }
    .force-card__desc {
        font-size: 0.56rem;
    }

    .notice-banner-liability__title {
        font-size: 0.82rem;
    }
    .notice-banner-liability__desc {
        font-size: 0.7rem;
    }

    .lb-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .terms-liability__title {
        font-size: 1.3rem;
    }

    .liability-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .force-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-liability__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Warranties, Liability & Third-Party Services Responsive
================================================== */

/* ==================================================
START: Termination, Governing Law, Policy Updates & Contact Information Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #terms-final {
        padding: 60px 0 40px;
    }

    .terms-final__header {
        margin-bottom: 36px;
    }

    .terms-final__title {
        font-size: 2.2rem;
    }

    .terms-final__subtitle {
        font-size: 0.95rem;
    }

    .final-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .final-banner__title {
        font-size: 1.3rem;
    }

    .terms-final__legal {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .legal-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .legal-card {
        padding: 14px 14px 14px;
    }
    .legal-card__icon {
        font-size: 1.1rem;
    }
    .legal-card__title {
        font-size: 0.76rem;
    }
    .legal-card__desc {
        font-size: 0.66rem;
    }

    .terms-final__lifecycle {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .lifecycle-timeline::before {
        left: 16px;
    }

    .lifecycle-step {
        gap: 14px;
    }
    .lifecycle-step__number {
        min-width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }
    .lifecycle-step__label {
        font-size: 0.76rem;
    }
    .lifecycle-step__desc {
        font-size: 0.68rem;
    }

    .terms-final__contact {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .contact-final-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .contact-final-card {
        padding: 14px 14px 14px;
    }
    .contact-final-card__value {
        font-size: 0.78rem;
    }

    .notice-final {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
        margin-bottom: 36px;
    }

    .notice-final__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-final__desc {
        max-width: 100%;
    }

    .closing-cta {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .closing-cta__content {
        padding: 28px 24px;
        order: 2;
    }

    .closing-cta__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .closing-cta__title {
        font-size: 1.2rem;
    }

    .fn-icon,
    .cl-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .terms-final__orb--1,
    .terms-final__orb--2 {
        display: none;
    }

    .terms-final__shape--2 {
        display: none;
    }

    #terms-final .particle--3,
    #terms-final .particle--5,
    #terms-final .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #terms-final {
        padding: 40px 0 30px;
    }

    .terms-final__header {
        margin-bottom: 28px;
    }

    .terms-final__title {
        font-size: 1.8rem;
    }

    .terms-final__subtitle {
        font-size: 0.88rem;
    }

    .final-banner__content {
        padding: 20px 16px 18px;
    }

    .final-banner__title {
        font-size: 1.1rem;
    }
    .final-banner__desc {
        font-size: 0.82rem;
    }

    .final-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-final-contact,
    .btn-banner-final-home {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .terms-final__legal {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .legal-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .legal-card {
        padding: 12px 12px 12px;
    }
    .legal-card__icon {
        font-size: 1rem;
    }
    .legal-card__title {
        font-size: 0.72rem;
    }
    .legal-card__desc {
        font-size: 0.62rem;
    }

    .terms-final__lifecycle {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .lifecycle-timeline::before {
        left: 14px;
    }

    .lifecycle-step {
        gap: 12px;
        padding: 6px 0;
    }
    .lifecycle-step__number {
        min-width: 26px;
        height: 26px;
        font-size: 0.55rem;
    }
    .lifecycle-step__label {
        font-size: 0.72rem;
    }
    .lifecycle-step__desc {
        font-size: 0.62rem;
    }

    .terms-final__contact {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .contact-final-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .contact-final-card {
        padding: 12px 12px 12px;
    }
    .contact-final-card__icon {
        font-size: 1.1rem;
    }
    .contact-final-card__value {
        font-size: 0.74rem;
    }
    .contact-final-card__btn {
        font-size: 0.58rem;
        padding: 2px 12px;
    }

    .notice-final {
        padding: 16px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .notice-final__icon {
        font-size: 1.8rem;
    }
    .notice-final__title {
        font-size: 0.9rem;
    }
    .notice-final__desc {
        font-size: 0.76rem;
    }
    .notice-final__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .closing-cta__content {
        padding: 20px 16px 18px;
    }

    .closing-cta__title {
        font-size: 1.05rem;
    }
    .closing-cta__desc {
        font-size: 0.82rem;
    }

    .closing-cta__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-final-team,
    .btn-cta-final-services {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .closing-cta__visual {
        min-height: 100px;
    }

    .fn-icon,
    .cl-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #terms-final .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .terms-final__title {
        font-size: 1.5rem;
    }

    .terms-final__subtitle {
        font-size: 0.8rem;
    }

    .legal-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .legal-card {
        padding: 10px 10px 10px;
    }
    .legal-card__title {
        font-size: 0.68rem;
    }
    .legal-card__desc {
        font-size: 0.58rem;
    }

    .contact-final-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .contact-final-card {
        padding: 10px 10px 10px;
    }
    .contact-final-card__value {
        font-size: 0.7rem;
    }

    .lifecycle-step__label {
        font-size: 0.68rem;
    }
    .lifecycle-step__desc {
        font-size: 0.58rem;
    }

    .notice-final__title {
        font-size: 0.82rem;
    }
    .notice-final__desc {
        font-size: 0.7rem;
    }

    .closing-cta__title {
        font-size: 0.95rem;
    }

    .fn-icon,
    .cl-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .terms-final__title {
        font-size: 1.3rem;
    }

    .legal-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .contact-final-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .closing-cta__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Termination, Governing Law, Policy Updates & Contact Information Responsive
================================================== */

/* ==================================================
START: Cookie Policy Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #cookie-hero {
        padding: 30px 0 50px;
        min-height: auto;
    }

    .cookie-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cookie-hero__title {
        font-size: 2.4rem;
    }

    .cookie-hero__subtitle {
        max-width: 100%;
    }

    .cookie-hero__meta {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .cookie-hero__meta .meta-card {
        padding: 8px 12px;
    }
    .cookie-hero__meta .meta-card__value {
        font-size: 0.76rem;
    }

    .cookie-hero__visual {
        min-height: 400px;
        order: -1;
    }

    .hero-visual {
        height: 400px;
        max-width: 100%;
    }

    .glass-cookie {
        width: 100px;
        height: 100px;
    }
    .glass-cookie .cookie-icon {
        font-size: 2.6rem;
    }
    .glass-cookie .cookie-shield {
        font-size: 1.4rem;
        top: 8px;
        right: 8px;
    }

    .visual-browser {
        width: 130px;
        top: 8%;
        left: 6%;
    }
    .visual-browser .browser-content .browser-cookie-icon {
        font-size: 1rem;
    }
    .visual-browser .browser-content .browser-text {
        font-size: 0.55rem;
    }

    .toggle-group {
        padding: 8px 12px;
        min-width: 90px;
        bottom: 18%;
        right: 8%;
    }
    .toggle-label {
        font-size: 0.5rem;
    }
    .toggle-switch {
        width: 24px;
        height: 14px;
    }
    .toggle-switch::after {
        width: 10px;
        height: 10px;
    }
    .toggle-switch--on::after {
        left: 12px;
    }

    .float-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .cookie-hero__orb--1,
    .cookie-hero__orb--2 {
        display: none;
    }

    .cookie-hero__shape--2 {
        display: none;
    }

    #cookie-hero .particle--3,
    #cookie-hero .particle--5,
    #cookie-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #cookie-hero {
        padding: 20px 0 40px;
    }

    .cookie-hero__title {
        font-size: 1.8rem;
    }

    .cookie-hero__subtitle {
        font-size: 0.9rem;
    }

    .cookie-hero__meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cookie-hero__meta .meta-card {
        padding: 8px 12px;
        border-radius: 10px;
    }

    .cookie-hero__actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-cookie-preferences,
    .btn-cookie-learn {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .cookie-hero__trust {
        gap: 4px 10px;
    }

    .cookie-hero__trust .trust-badge {
        font-size: 0.65rem;
        padding: 3px 10px 3px 8px;
    }
    .cookie-hero__trust .trust-badge i {
        font-size: 0.7rem;
    }

    .cookie-hero__visual {
        min-height: 320px;
    }

    .hero-visual {
        height: 320px;
    }

    .glass-cookie {
        width: 80px;
        height: 80px;
    }
    .glass-cookie .cookie-icon {
        font-size: 2rem;
    }
    .glass-cookie .cookie-shield {
        font-size: 1.1rem;
        top: 6px;
        right: 6px;
    }

    .visual-browser {
        width: 100px;
        top: 6%;
        left: 5%;
        border-radius: 8px;
    }
    .visual-browser .browser-bar {
        padding: 4px 8px;
    }
    .visual-browser .browser-bar .dot {
        width: 5px;
        height: 5px;
    }
    .visual-browser .browser-bar .browser-url {
        font-size: 0.35rem;
    }
    .visual-browser .browser-content {
        padding: 6px 10px;
    }
    .visual-browser .browser-content .browser-cookie-icon {
        font-size: 0.8rem;
    }
    .visual-browser .browser-content .browser-text {
        font-size: 0.45rem;
    }

    .toggle-group {
        padding: 6px 10px;
        min-width: 75px;
        bottom: 20%;
        right: 6%;
        border-radius: 10px;
    }
    .toggle-item {
        gap: 6px;
    }
    .toggle-label {
        font-size: 0.45rem;
    }
    .toggle-switch {
        width: 20px;
        height: 12px;
        border-radius: 8px;
    }
    .toggle-switch::after {
        width: 8px;
        height: 8px;
        top: 2px;
        left: 2px;
    }
    .toggle-switch--on::after {
        left: 10px;
    }

    .float-icon {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .visual-connections {
        display: none;
    }

    .orb {
        display: none;
    }

    #cookie-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-hero__title {
        font-size: 1.5rem;
    }

    .cookie-hero__subtitle {
        font-size: 0.8rem;
    }

    .cookie-hero__visual {
        min-height: 280px;
    }

    .hero-visual {
        height: 280px;
    }

    .glass-cookie {
        width: 65px;
        height: 65px;
    }
    .glass-cookie .cookie-icon {
        font-size: 1.6rem;
    }
    .glass-cookie .cookie-shield {
        font-size: 0.9rem;
        top: 4px;
        right: 4px;
    }

    .visual-browser {
        width: 80px;
        top: 5%;
        left: 4%;
    }
    .visual-browser .browser-content {
        padding: 4px 8px;
    }
    .visual-browser .browser-content .browser-cookie-icon {
        font-size: 0.6rem;
    }
    .visual-browser .browser-content .browser-text {
        font-size: 0.4rem;
    }

    .toggle-group {
        min-width: 65px;
        padding: 4px 8px;
        bottom: 15%;
        right: 4%;
    }
    .toggle-label {
        font-size: 0.4rem;
    }
    .toggle-switch {
        width: 18px;
        height: 10px;
    }
    .toggle-switch::after {
        width: 6px;
        height: 6px;
        top: 2px;
        left: 2px;
    }
    .toggle-switch--on::after {
        left: 10px;
    }

    .float-icon {
        width: 22px;
        height: 22px;
        font-size: 0.5rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-hero__title {
        font-size: 1.3rem;
    }

    .cookie-hero__visual {
        min-height: 240px;
    }

    .hero-visual {
        height: 240px;
    }

    .glass-cookie {
        width: 55px;
        height: 55px;
    }
    .glass-cookie .cookie-icon {
        font-size: 1.3rem;
    }
    .glass-cookie .cookie-shield {
        font-size: 0.7rem;
    }

    .visual-browser {
        width: 65px;
    }
    .visual-browser .browser-content .browser-text {
        display: none;
    }
    .visual-browser .browser-content .browser-cookie-icon {
        font-size: 0.5rem;
    }

    .toggle-group {
        min-width: 55px;
        padding: 3px 6px;
    }
    .toggle-label {
        font-size: 0.35rem;
    }
    .toggle-switch {
        width: 16px;
        height: 9px;
    }
    .toggle-switch::after {
        width: 5px;
        height: 5px;
        top: 2px;
        left: 2px;
    }
    .toggle-switch--on::after {
        left: 9px;
    }

    .float-icon {
        width: 18px;
        height: 18px;
        font-size: 0.4rem;
    }
}

/* ==================================================
END: Cookie Policy Hero Banner Responsive
================================================== */

/* ==================================================
START: What Are Cookies & Why We Use Them Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #cookie-overview {
        padding: 60px 0 40px;
    }

    .cookie-overview__header {
        margin-bottom: 36px;
    }

    .cookie-overview__title {
        font-size: 2.2rem;
    }

    .cookie-overview__subtitle {
        font-size: 0.95rem;
    }

    .explanation-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .explanation-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .explanation-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .explanation-banner__title {
        font-size: 1.3rem;
    }

    .cookie-overview__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .cookie-flow {
        min-width: 600px;
        gap: 4px;
    }

    .flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .flow-node__label {
        font-size: 0.55rem;
    }
    .flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .flow-node__connector::after {
        font-size: 0.5rem;
    }

    .cookie-overview__reasons {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .reasons-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .reason-card {
        padding: 14px 14px 14px;
    }
    .reason-card__icon {
        font-size: 1.2rem;
    }
    .reason-card__title {
        font-size: 0.78rem;
    }
    .reason-card__desc {
        font-size: 0.68rem;
    }

    .notice-banner-cookie {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-cookie__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-cookie__desc {
        max-width: 100%;
    }

    .ex-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .cookie-overview__orb--1,
    .cookie-overview__orb--2 {
        display: none;
    }

    .cookie-overview__shape--2 {
        display: none;
    }

    #cookie-overview .particle--3,
    #cookie-overview .particle--5,
    #cookie-overview .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #cookie-overview {
        padding: 40px 0 30px;
    }

    .cookie-overview__header {
        margin-bottom: 28px;
    }

    .cookie-overview__title {
        font-size: 1.8rem;
    }

    .cookie-overview__subtitle {
        font-size: 0.88rem;
    }

    .explanation-banner__content {
        padding: 20px 16px 18px;
    }

    .explanation-banner__title {
        font-size: 1.1rem;
    }
    .explanation-banner__desc {
        font-size: 0.82rem;
    }

    .explanation-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-cookie-manage,
    .btn-banner-cookie-privacy {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .cookie-overview__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .cookie-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .flow-node__label {
        font-size: 0.5rem;
    }
    .flow-node__connector {
        display: none;
    }

    .cookie-overview__reasons {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .reasons-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .reason-card {
        padding: 12px 12px 12px;
    }
    .reason-card__icon {
        font-size: 1.1rem;
    }
    .reason-card__title {
        font-size: 0.74rem;
    }
    .reason-card__desc {
        font-size: 0.64rem;
    }

    .notice-banner-cookie {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-cookie__icon {
        font-size: 1.6rem;
    }
    .notice-banner-cookie__title {
        font-size: 0.9rem;
    }
    .notice-banner-cookie__desc {
        font-size: 0.76rem;
    }
    .notice-banner-cookie__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ex-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #cookie-overview .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-overview__title {
        font-size: 1.5rem;
    }

    .cookie-overview__subtitle {
        font-size: 0.8rem;
    }

    .reasons-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .reason-card {
        padding: 10px 10px 10px;
    }
    .reason-card__title {
        font-size: 0.7rem;
    }
    .reason-card__desc {
        font-size: 0.6rem;
    }

    .notice-banner-cookie__title {
        font-size: 0.82rem;
    }
    .notice-banner-cookie__desc {
        font-size: 0.7rem;
    }

    .ex-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-overview__title {
        font-size: 1.3rem;
    }

    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-cookie__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: What Are Cookies & Why We Use Them Responsive
================================================== */

/* ==================================================
START: Types of Cookies We Use Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #cookie-types {
        padding: 60px 0 40px;
    }

    .cookie-types__header {
        margin-bottom: 36px;
    }

    .cookie-types__title {
        font-size: 2.2rem;
    }

    .cookie-types__subtitle {
        font-size: 0.95rem;
    }

    .categories-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .categories-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .categories-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .categories-banner__title {
        font-size: 1.3rem;
    }

    .cookie-types__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .category-card {
        padding: 14px 14px 14px;
    }
    .category-card__icon {
        font-size: 1.2rem;
    }
    .category-card__title {
        font-size: 0.78rem;
    }
    .category-card__purpose {
        font-size: 0.68rem;
    }
    .cat-example {
        font-size: 0.52rem;
        padding: 1px 8px;
    }
    .category-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }

    .cookie-types__lifecycle {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .lifecycle-flow {
        min-width: 600px;
        gap: 4px;
    }

    .lifecycle-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .lifecycle-node__label {
        font-size: 0.55rem;
    }
    .lifecycle-node__connector {
        right: -6px;
        width: 12px;
    }
    .lifecycle-node__connector::after {
        font-size: 0.5rem;
    }

    .cookie-types__table {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .cookie-summary-table {
        font-size: 0.72rem;
        min-width: 600px;
    }
    .cookie-summary-table thead th,
    .cookie-summary-table tbody td {
        padding: 8px 12px;
    }

    .notice-banner-categories {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-categories__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-categories__desc {
        max-width: 100%;
    }

    .ct-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .cookie-types__orb--1,
    .cookie-types__orb--2 {
        display: none;
    }

    .cookie-types__shape--2 {
        display: none;
    }

    #cookie-types .particle--3,
    #cookie-types .particle--5,
    #cookie-types .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #cookie-types {
        padding: 40px 0 30px;
    }

    .cookie-types__header {
        margin-bottom: 28px;
    }

    .cookie-types__title {
        font-size: 1.8rem;
    }

    .cookie-types__subtitle {
        font-size: 0.88rem;
    }

    .categories-banner__content {
        padding: 20px 16px 18px;
    }

    .categories-banner__title {
        font-size: 1.1rem;
    }
    .categories-banner__desc {
        font-size: 0.82rem;
    }

    .categories-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-categories-manage,
    .btn-banner-categories-privacy {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .cookie-types__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .category-card {
        padding: 12px 12px 12px;
    }
    .category-card__icon {
        font-size: 1.1rem;
    }
    .category-card__title {
        font-size: 0.74rem;
    }
    .category-card__purpose {
        font-size: 0.64rem;
    }
    .cat-example {
        font-size: 0.48rem;
        padding: 1px 6px;
    }
    .category-card__badge {
        font-size: 0.48rem;
        padding: 1px 10px;
    }

    .cookie-types__lifecycle {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .lifecycle-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .lifecycle-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .lifecycle-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .lifecycle-node__label {
        font-size: 0.5rem;
    }
    .lifecycle-node__connector {
        display: none;
    }

    .cookie-types__table {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .cookie-summary-table {
        font-size: 0.65rem;
        min-width: 500px;
    }
    .cookie-summary-table thead th,
    .cookie-summary-table tbody td {
        padding: 6px 10px;
    }
    .table-badge,
    .status-badge {
        font-size: 0.5rem;
        padding: 1px 8px;
    }

    .notice-banner-categories {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-categories__icon {
        font-size: 1.6rem;
    }
    .notice-banner-categories__title {
        font-size: 0.9rem;
    }
    .notice-banner-categories__desc {
        font-size: 0.76rem;
    }
    .notice-banner-categories__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ct-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #cookie-types .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-types__title {
        font-size: 1.5rem;
    }

    .cookie-types__subtitle {
        font-size: 0.8rem;
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .category-card {
        padding: 10px 10px 10px;
    }
    .category-card__title {
        font-size: 0.7rem;
    }
    .category-card__purpose {
        font-size: 0.6rem;
    }

    .cookie-summary-table {
        font-size: 0.58rem;
        min-width: 420px;
    }
    .cookie-summary-table thead th,
    .cookie-summary-table tbody td {
        padding: 4px 8px;
    }

    .notice-banner-categories__title {
        font-size: 0.82rem;
    }
    .notice-banner-categories__desc {
        font-size: 0.7rem;
    }

    .ct-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-types__title {
        font-size: 1.3rem;
    }

    .categories-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .cookie-summary-table {
        font-size: 0.5rem;
        min-width: 360px;
    }
    .cookie-summary-table thead th,
    .cookie-summary-table tbody td {
        padding: 3px 6px;
    }

    .notice-banner-categories__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Types of Cookies We Use Responsive
================================================== */

/* ==================================================
START: Managing Cookie Preferences Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #cookie-preferences {
        padding: 60px 0 40px;
    }

    .cookie-preferences__header {
        margin-bottom: 36px;
    }

    .cookie-preferences__title {
        font-size: 2.2rem;
    }

    .cookie-preferences__subtitle {
        font-size: 0.95rem;
    }

    .pref-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .pref-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .pref-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .pref-banner__title {
        font-size: 1.3rem;
    }

    .cookie-preferences__options {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .options-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .option-card {
        padding: 14px 14px 14px;
    }
    .option-card__icon {
        font-size: 1.2rem;
    }
    .option-card__title {
        font-size: 0.78rem;
    }
    .option-card__desc {
        font-size: 0.68rem;
    }

    .cookie-preferences__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .pref-flow {
        min-width: 600px;
        gap: 4px;
    }

    .pref-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .pref-flow-node__label {
        font-size: 0.55rem;
    }
    .pref-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .pref-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .cookie-preferences__browsers {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .browsers-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .browser-card {
        padding: 14px 14px 14px;
    }
    .browser-card__icon {
        font-size: 1.8rem;
    }
    .browser-card__name {
        font-size: 0.78rem;
    }
    .browser-card__desc {
        font-size: 0.66rem;
    }

    .notice-banner-pref {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-pref__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-pref__desc {
        max-width: 100%;
    }

    .pf-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .cookie-preferences__orb--1,
    .cookie-preferences__orb--2 {
        display: none;
    }

    .cookie-preferences__shape--2 {
        display: none;
    }

    #cookie-preferences .particle--3,
    #cookie-preferences .particle--5,
    #cookie-preferences .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #cookie-preferences {
        padding: 40px 0 30px;
    }

    .cookie-preferences__header {
        margin-bottom: 28px;
    }

    .cookie-preferences__title {
        font-size: 1.8rem;
    }

    .cookie-preferences__subtitle {
        font-size: 0.88rem;
    }

    .pref-banner__content {
        padding: 20px 16px 18px;
    }

    .pref-banner__title {
        font-size: 1.1rem;
    }
    .pref-banner__desc {
        font-size: 0.82rem;
    }

    .pref-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-pref-manage,
    .btn-banner-pref-privacy {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .cookie-preferences__options {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .options-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .option-card {
        padding: 12px 12px 12px;
    }
    .option-card__icon {
        font-size: 1.1rem;
    }
    .option-card__title {
        font-size: 0.74rem;
    }
    .option-card__desc {
        font-size: 0.64rem;
    }

    .cookie-preferences__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .pref-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .pref-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .pref-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .pref-flow-node__label {
        font-size: 0.5rem;
    }
    .pref-flow-node__connector {
        display: none;
    }

    .cookie-preferences__browsers {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .browsers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .browser-card {
        padding: 12px 12px 12px;
    }
    .browser-card__icon {
        font-size: 1.5rem;
    }
    .browser-card__name {
        font-size: 0.74rem;
    }
    .browser-card__desc {
        font-size: 0.62rem;
    }

    .notice-banner-pref {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-pref__icon {
        font-size: 1.6rem;
    }
    .notice-banner-pref__title {
        font-size: 0.9rem;
    }
    .notice-banner-pref__desc {
        font-size: 0.76rem;
    }
    .notice-banner-pref__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .pf-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #cookie-preferences .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-preferences__title {
        font-size: 1.5rem;
    }

    .cookie-preferences__subtitle {
        font-size: 0.8rem;
    }

    .options-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .option-card {
        padding: 10px 10px 10px;
    }
    .option-card__title {
        font-size: 0.7rem;
    }
    .option-card__desc {
        font-size: 0.6rem;
    }

    .browsers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .browser-card {
        padding: 10px 10px 10px;
    }
    .browser-card__name {
        font-size: 0.7rem;
    }
    .browser-card__desc {
        font-size: 0.58rem;
    }
    .browser-card__icon {
        font-size: 1.3rem;
    }

    .notice-banner-pref__title {
        font-size: 0.82rem;
    }
    .notice-banner-pref__desc {
        font-size: 0.7rem;
    }

    .pf-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-preferences__title {
        font-size: 1.3rem;
    }

    .options-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .browsers-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-pref__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Managing Cookie Preferences Responsive
================================================== */

/* ==================================================
START: Third-Party Cookies & Technologies Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #cookie-thirdparty {
        padding: 60px 0 40px;
    }

    .cookie-thirdparty__header {
        margin-bottom: 36px;
    }

    .cookie-thirdparty__title {
        font-size: 2.2rem;
    }

    .cookie-thirdparty__subtitle {
        font-size: 0.95rem;
    }

    .thirdparty-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .thirdparty-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .thirdparty-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .thirdparty-banner__title {
        font-size: 1.3rem;
    }

    .cookie-thirdparty__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .thirdparty-categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .thirdparty-card {
        padding: 14px 14px 14px;
    }
    .thirdparty-card__icon {
        font-size: 1.2rem;
    }
    .thirdparty-card__title {
        font-size: 0.78rem;
    }
    .thirdparty-card__purpose {
        font-size: 0.68rem;
    }
    .tp-example {
        font-size: 0.52rem;
        padding: 1px 8px;
    }
    .thirdparty-card__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }

    .cookie-thirdparty__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .thirdparty-flow {
        min-width: 600px;
        gap: 4px;
    }

    .thirdparty-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .thirdparty-flow-node__label {
        font-size: 0.55rem;
    }
    .thirdparty-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .thirdparty-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .cookie-thirdparty__transparency {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .transparency-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .transparency-card {
        padding: 14px 14px 14px;
    }
    .transparency-card__icon {
        font-size: 1.1rem;
    }
    .transparency-card__title {
        font-size: 0.76rem;
    }
    .transparency-card__desc {
        font-size: 0.66rem;
    }

    .notice-banner-thirdparty {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-thirdparty__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-thirdparty__desc {
        max-width: 100%;
    }

    .tp-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .cookie-thirdparty__orb--1,
    .cookie-thirdparty__orb--2 {
        display: none;
    }

    .cookie-thirdparty__shape--2 {
        display: none;
    }

    #cookie-thirdparty .particle--3,
    #cookie-thirdparty .particle--5,
    #cookie-thirdparty .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #cookie-thirdparty {
        padding: 40px 0 30px;
    }

    .cookie-thirdparty__header {
        margin-bottom: 28px;
    }

    .cookie-thirdparty__title {
        font-size: 1.8rem;
    }

    .cookie-thirdparty__subtitle {
        font-size: 0.88rem;
    }

    .thirdparty-banner__content {
        padding: 20px 16px 18px;
    }

    .thirdparty-banner__title {
        font-size: 1.1rem;
    }
    .thirdparty-banner__desc {
        font-size: 0.82rem;
    }

    .thirdparty-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-thirdparty-privacy,
    .btn-banner-thirdparty-manage {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .cookie-thirdparty__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .thirdparty-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .thirdparty-card {
        padding: 12px 12px 12px;
    }
    .thirdparty-card__icon {
        font-size: 1.1rem;
    }
    .thirdparty-card__title {
        font-size: 0.74rem;
    }
    .thirdparty-card__purpose {
        font-size: 0.64rem;
    }
    .tp-example {
        font-size: 0.48rem;
        padding: 1px 6px;
    }
    .thirdparty-card__badge {
        font-size: 0.48rem;
        padding: 1px 10px;
    }

    .cookie-thirdparty__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .thirdparty-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .thirdparty-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .thirdparty-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .thirdparty-flow-node__label {
        font-size: 0.5rem;
    }
    .thirdparty-flow-node__connector {
        display: none;
    }

    .cookie-thirdparty__transparency {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .transparency-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .transparency-card {
        padding: 12px 12px 12px;
    }
    .transparency-card__icon {
        font-size: 1rem;
    }
    .transparency-card__title {
        font-size: 0.72rem;
    }
    .transparency-card__desc {
        font-size: 0.62rem;
    }

    .notice-banner-thirdparty {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-thirdparty__icon {
        font-size: 1.6rem;
    }
    .notice-banner-thirdparty__title {
        font-size: 0.9rem;
    }
    .notice-banner-thirdparty__desc {
        font-size: 0.76rem;
    }
    .notice-banner-thirdparty__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .tp-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #cookie-thirdparty .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-thirdparty__title {
        font-size: 1.5rem;
    }

    .cookie-thirdparty__subtitle {
        font-size: 0.8rem;
    }

    .thirdparty-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .thirdparty-card {
        padding: 10px 10px 10px;
    }
    .thirdparty-card__title {
        font-size: 0.7rem;
    }
    .thirdparty-card__purpose {
        font-size: 0.6rem;
    }

    .transparency-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .transparency-card {
        padding: 10px 10px 10px;
    }
    .transparency-card__title {
        font-size: 0.68rem;
    }
    .transparency-card__desc {
        font-size: 0.58rem;
    }

    .notice-banner-thirdparty__title {
        font-size: 0.82rem;
    }
    .notice-banner-thirdparty__desc {
        font-size: 0.7rem;
    }

    .tp-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-thirdparty__title {
        font-size: 1.3rem;
    }

    .thirdparty-categories-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .transparency-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .notice-banner-thirdparty__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Third-Party Cookies & Technologies Responsive
================================================== */

/* ==================================================
START: Policy Updates & Your Choices Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #cookie-updates {
        padding: 60px 0 40px;
    }

    .cookie-updates__header {
        margin-bottom: 36px;
    }

    .cookie-updates__title {
        font-size: 2.2rem;
    }

    .cookie-updates__subtitle {
        font-size: 0.95rem;
    }

    .updates-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .updates-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .updates-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .updates-banner__title {
        font-size: 1.3rem;
    }

    .cookie-updates__lifecycle {
        padding: 20px 20px 18px;
        border-radius: 16px;
        margin-bottom: 36px;
    }

    .lifecycle-timeline::before {
        left: 16px;
    }

    .lifecycle-step {
        gap: 14px;
    }
    .lifecycle-step__number {
        min-width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }
    .lifecycle-step__label {
        font-size: 0.76rem;
    }
    .lifecycle-step__desc {
        font-size: 0.68rem;
    }

    .cookie-updates__choices {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .choices-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .choice-card {
        padding: 14px 14px 14px;
    }
    .choice-card__icon {
        font-size: 1.2rem;
    }
    .choice-card__title {
        font-size: 0.78rem;
    }
    .choice-card__desc {
        font-size: 0.68rem;
    }

    .notice-banner-updates {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-updates__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-updates__desc {
        max-width: 100%;
    }

    .closing-updates-cta {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .closing-updates-cta__content {
        padding: 28px 24px;
        order: 2;
    }

    .closing-updates-cta__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .closing-updates-cta__title {
        font-size: 1.2rem;
    }

    .up-icon,
    .cu-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .cookie-updates__orb--1,
    .cookie-updates__orb--2 {
        display: none;
    }

    .cookie-updates__shape--2 {
        display: none;
    }

    #cookie-updates .particle--3,
    #cookie-updates .particle--5,
    #cookie-updates .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #cookie-updates {
        padding: 40px 0 30px;
    }

    .cookie-updates__header {
        margin-bottom: 28px;
    }

    .cookie-updates__title {
        font-size: 1.8rem;
    }

    .cookie-updates__subtitle {
        font-size: 0.88rem;
    }

    .updates-banner__content {
        padding: 20px 16px 18px;
    }

    .updates-banner__title {
        font-size: 1.1rem;
    }
    .updates-banner__desc {
        font-size: 0.82rem;
    }

    .updates-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-updates-privacy,
    .btn-banner-updates-manage {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .cookie-updates__lifecycle {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .lifecycle-timeline::before {
        left: 14px;
    }

    .lifecycle-step {
        gap: 12px;
        padding: 6px 0;
    }
    .lifecycle-step__number {
        min-width: 26px;
        height: 26px;
        font-size: 0.55rem;
    }
    .lifecycle-step__label {
        font-size: 0.72rem;
    }
    .lifecycle-step__desc {
        font-size: 0.62rem;
    }

    .cookie-updates__choices {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .choices-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .choice-card {
        padding: 12px 12px 12px;
    }
    .choice-card__icon {
        font-size: 1.1rem;
    }
    .choice-card__title {
        font-size: 0.74rem;
    }
    .choice-card__desc {
        font-size: 0.64rem;
    }

    .notice-banner-updates {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-updates__icon {
        font-size: 1.6rem;
    }
    .notice-banner-updates__title {
        font-size: 0.9rem;
    }
    .notice-banner-updates__desc {
        font-size: 0.76rem;
    }
    .notice-banner-updates__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .closing-updates-cta__content {
        padding: 20px 16px 18px;
    }

    .closing-updates-cta__title {
        font-size: 1.05rem;
    }
    .closing-updates-cta__desc {
        font-size: 0.82rem;
    }

    .closing-updates-cta__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-updates-contact,
    .btn-cta-updates-privacy {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .closing-updates-cta__visual {
        min-height: 100px;
    }

    .up-icon,
    .cu-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #cookie-updates .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-updates__title {
        font-size: 1.5rem;
    }

    .cookie-updates__subtitle {
        font-size: 0.8rem;
    }

    .choices-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }

    .choice-card {
        padding: 10px 10px 10px;
    }
    .choice-card__title {
        font-size: 0.7rem;
    }
    .choice-card__desc {
        font-size: 0.6rem;
    }

    .lifecycle-step__label {
        font-size: 0.68rem;
    }
    .lifecycle-step__desc {
        font-size: 0.58rem;
    }

    .notice-banner-updates__title {
        font-size: 0.82rem;
    }
    .notice-banner-updates__desc {
        font-size: 0.7rem;
    }

    .closing-updates-cta__title {
        font-size: 0.95rem;
    }

    .up-icon,
    .cu-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-updates__title {
        font-size: 1.3rem;
    }

    .choices-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .closing-updates-cta__title {
        font-size: 0.85rem;
    }
}

/* ==================================================
END: Policy Updates & Your Choices Responsive
================================================== */

/* ==================================================
START: Global Cookie Consent Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    .cookie-banner__container {
        padding: 24px 28px;
        border-radius: 18px;
    }

    .cookie-banner__title {
        font-size: 1.05rem;
    }

    .cookie-banner__desc {
        font-size: 0.85rem;
    }

    .cookie-banner__btn {
        padding: 8px 20px;
        font-size: 0.8rem;
        border-radius: 10px;
    }
}

/* Mobile Landscape & Portrait */
@media (max-width: 576px) {
    .cookie-banner {
        padding: 0;
        bottom: 0;
        align-items: flex-end;
    }

    .cookie-banner__overlay {
        display: none;
    }

    .cookie-banner__container {
        padding: 20px 18px 18px;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.04);
        max-width: 100%;
    }

    .cookie-banner__content {
        gap: 8px;
    }

    .cookie-banner__badge {
        font-size: 0.6rem;
        padding: 2px 12px 2px 8px;
    }
    .cookie-banner__badge-icon {
        font-size: 0.7rem;
    }

    .cookie-banner__title {
        font-size: 0.95rem;
    }

    .cookie-banner__desc {
        font-size: 0.8rem;
        line-height: 1.5;
        max-width: 100%;
    }

    .cookie-banner__actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 2px;
    }

    .cookie-banner__btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 0.8rem;
        border-radius: 10px;
        white-space: normal;
    }

    .cookie-banner__btn--customize {
        order: 3;
    }

    .cookie-banner__btn--reject {
        order: 2;
    }

    .cookie-banner__btn--accept {
        order: 1;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-banner__container {
        padding: 16px 14px 14px;
        border-radius: 14px 14px 0 0;
    }

    .cookie-banner__title {
        font-size: 0.88rem;
    }

    .cookie-banner__desc {
        font-size: 0.74rem;
    }

    .cookie-banner__btn {
        font-size: 0.74rem;
        padding: 8px 14px;
        border-radius: 8px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-banner__container {
        padding: 12px 10px 12px;
    }

    .cookie-banner__title {
        font-size: 0.82rem;
    }

    .cookie-banner__desc {
        font-size: 0.68rem;
    }

    .cookie-banner__btn {
        font-size: 0.68rem;
        padding: 6px 12px;
    }
}

/* ==================================================
END: Global Cookie Consent Banner Responsive
================================================== */

/* ==================================================
START: Global Cookie Preferences Modal Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    .cookie-modal {
        padding: 16px;
    }

    .cookie-modal__container {
        max-height: 95vh;
        border-radius: 20px;
    }

    .cookie-modal__header {
        padding: 22px 24px 14px;
    }

    .cookie-modal__title {
        font-size: 1.2rem;
    }

    .cookie-modal__body {
        grid-template-columns: 1fr 1fr;
    }

    .cookie-modal__info {
        padding: 18px 16px 16px 20px;
    }

    .cookie-modal__controls {
        padding: 16px 18px 14px 18px;
    }

    .cookie-control {
        padding: 12px 14px;
    }

    .cookie-modal__footer {
        padding: 14px 20px 16px;
    }

    .cookie-modal__btn {
        padding: 8px 18px;
        font-size: 0.8rem;
    }

    .cookie-modal__actions {
        gap: 8px 10px;
    }
}

/* Mobile Landscape & Portrait */
@media (max-width: 768px) {
    .cookie-modal__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        overflow-y: auto;
    }

    .cookie-modal__info {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        padding: 16px 16px 14px 16px;
    }

    .cookie-modal__info-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .info-card {
        padding: 8px 10px;
        gap: 8px;
    }

    .info-card__icon {
        font-size: 0.9rem;
    }
    .info-card__title {
        font-size: 0.7rem;
    }
    .info-card__desc {
        font-size: 0.6rem;
    }

    .cookie-modal__controls {
        padding: 14px 16px 12px 16px;
        overflow-y: auto;
    }

    .cookie-controls-list {
        gap: 8px;
    }

    .cookie-control {
        padding: 10px 12px;
        border-radius: 12px;
    }

    .cookie-control__name {
        font-size: 0.78rem;
    }
    .cookie-control__desc {
        font-size: 0.68rem;
    }

    .toggle-label {
        width: 38px;
        height: 22px;
    }
    .toggle-label .toggle-slider {
        width: 16px;
        height: 16px;
        top: 3px;
        left: 3px;
    }
    .toggle-input:checked + .toggle-label .toggle-slider {
        left: 19px;
    }
}

@media (max-width: 576px) {
    .cookie-modal {
        padding: 8px;
    }

    .cookie-modal__container {
        max-height: 98vh;
        border-radius: 16px;
        max-width: 100%;
    }

    .cookie-modal__close {
        top: 12px;
        right: 12px;
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .cookie-modal__header {
        padding: 16px 16px 12px;
    }

    .cookie-modal__badge {
        font-size: 0.55rem;
        padding: 2px 10px 2px 8px;
    }
    .cookie-modal__badge-icon {
        font-size: 0.65rem;
    }

    .cookie-modal__title {
        font-size: 1.05rem;
    }

    .cookie-modal__desc {
        font-size: 0.8rem;
    }

    .cookie-modal__info-cards {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .info-card {
        padding: 6px 8px;
        gap: 6px;
        border-radius: 10px;
    }
    .info-card__icon {
        font-size: 0.8rem;
    }
    .info-card__title {
        font-size: 0.65rem;
    }
    .info-card__desc {
        font-size: 0.55rem;
    }

    .cookie-modal__controls {
        padding: 10px 12px 8px 12px;
    }

    .cookie-control {
        padding: 8px 10px;
        border-radius: 10px;
    }

    .cookie-control__header {
        gap: 8px;
        flex-wrap: wrap;
    }

    .cookie-control__name {
        font-size: 0.72rem;
    }
    .cookie-control__badge {
        font-size: 0.48rem;
        padding: 1px 8px;
    }
    .cookie-control__desc {
        font-size: 0.62rem;
    }

    .toggle-label {
        width: 34px;
        height: 20px;
    }
    .toggle-label .toggle-slider {
        width: 14px;
        height: 14px;
        top: 3px;
        left: 3px;
    }
    .toggle-input:checked + .toggle-label .toggle-slider {
        left: 17px;
    }

    .cookie-modal__footer {
        padding: 10px 14px 14px;
    }

    .cookie-modal__actions {
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }

    .cookie-modal__btn {
        width: 100%;
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.78rem;
        border-radius: 10px;
        white-space: normal;
    }

    .cookie-modal__btn--reset {
        order: 4;
        border: 1px solid var(--color-gray-light);
        padding: 8px 16px;
    }

    .cookie-modal__btn--reject {
        order: 3;
    }

    .cookie-modal__btn--save {
        order: 2;
    }

    .cookie-modal__btn--accept {
        order: 1;
    }

    .cookie-modal__footer-note {
        font-size: 0.6rem;
        justify-content: center;
        text-align: center;
        margin-top: 8px;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-modal__container {
        border-radius: 14px;
    }

    .cookie-modal__header {
        padding: 12px 12px 10px;
    }

    .cookie-modal__title {
        font-size: 0.95rem;
    }
    .cookie-modal__desc {
        font-size: 0.72rem;
    }

    .cookie-modal__info-cards {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .info-card {
        padding: 4px 6px;
        gap: 4px;
    }
    .info-card__title {
        font-size: 0.6rem;
    }
    .info-card__desc {
        font-size: 0.5rem;
    }

    .cookie-control__name {
        font-size: 0.68rem;
    }
    .cookie-control__desc {
        font-size: 0.58rem;
    }

    .cookie-modal__btn {
        font-size: 0.72rem;
        padding: 6px 12px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-modal__info-cards {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .cookie-modal__title {
        font-size: 0.88rem;
    }

    .cookie-control__name {
        font-size: 0.62rem;
    }
}

/* ==================================================
END: Global Cookie Preferences Modal Responsive
================================================== */

/* ==================================================
START: Global Floating Cookie Settings Button Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    .cookie-settings-btn {
        bottom: 28px;
        left: 28px;
        width: 52px;
        height: 52px;
    }

    .cookie-settings-btn__icon {
        font-size: 1.25rem;
    }

    .cookie-settings-btn__dot {
        width: 10px;
        height: 10px;
        top: 3px;
        right: 3px;
        border-width: 2px;
    }

    .cookie-settings-btn__ring {
        inset: -3px;
    }

    .cookie-settings-btn__tooltip {
        padding: 6px 14px;
        min-width: 100px;
        bottom: calc(100% + 12px);
    }

    .cookie-settings-btn__tooltip .tooltip-title {
        font-size: 0.7rem;
    }
    .cookie-settings-btn__tooltip .tooltip-desc {
        font-size: 0.55rem;
    }
}

/* Mobile Landscape & Portrait */
@media (max-width: 576px) {
    .cookie-settings-btn {
        bottom: 20px;
        left: 20px;
        width: 48px;
        height: 48px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .cookie-settings-btn__icon {
        font-size: 1.1rem;
    }

    .cookie-settings-btn__dot {
        width: 10px;
        height: 10px;
        top: 2px;
        right: 2px;
        border-width: 2px;
    }

    .cookie-settings-btn__ring {
        inset: -3px;
    }

    .cookie-settings-btn__tooltip {
        padding: 5px 12px;
        min-width: 80px;
        bottom: calc(100% + 10px);
        border-radius: 10px;
    }

    .cookie-settings-btn__tooltip .tooltip-title {
        font-size: 0.65rem;
    }
    .cookie-settings-btn__tooltip .tooltip-desc {
        font-size: 0.5rem;
    }

    /* Ensure button doesn't overlap with other floating elements */
    /* Adjust for WhatsApp button, Back to Top, etc. */
    .cookie-settings-btn {
        bottom: 20px;
        left: 20px;
    }

    /* If there's a WhatsApp or chat button on the right, ensure no overlap */
    .cookie-settings-btn {
        z-index: 9998;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .cookie-settings-btn {
        bottom: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
    }

    .cookie-settings-btn__icon {
        font-size: 1rem;
    }

    .cookie-settings-btn__dot {
        width: 8px;
        height: 8px;
        top: 2px;
        right: 2px;
        border-width: 1.5px;
    }

    .cookie-settings-btn__tooltip {
        padding: 4px 10px;
        min-width: 70px;
        bottom: calc(100% + 8px);
        border-radius: 8px;
    }

    .cookie-settings-btn__tooltip .tooltip-title {
        font-size: 0.6rem;
    }
    .cookie-settings-btn__tooltip .tooltip-desc {
        display: none;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .cookie-settings-btn {
        bottom: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
    }

    .cookie-settings-btn__icon {
        font-size: 0.9rem;
    }

    .cookie-settings-btn__dot {
        width: 7px;
        height: 7px;
        top: 1px;
        right: 1px;
    }

    .cookie-settings-btn__tooltip {
        display: none;
    }
}

/* ==================================================
END: Global Floating Cookie Settings Button Responsive
================================================== */

/* ==================================================
START: Sitemap Hero Banner Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #sitemap-hero {
        padding: 30px 0 50px;
        min-height: auto;
    }

    .sitemap-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sitemap-hero__title {
        font-size: 2.4rem;
    }

    .sitemap-hero__subtitle {
        max-width: 100%;
    }

    .sitemap-hero__meta {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .sitemap-hero__meta .meta-card {
        padding: 8px 12px;
    }
    .sitemap-hero__meta .meta-card__value {
        font-size: 0.76rem;
    }

    .sitemap-hero__visual {
        min-height: 400px;
        order: -1;
    }

    .hero-visual {
        height: 400px;
        max-width: 100%;
    }

    .structure-tree {
        width: 280px;
        height: 280px;
        padding: 18px;
        border-radius: 20px;
    }

    .tree-root {
        padding: 4px 12px 4px 8px;
        margin-bottom: 10px;
    }
    .root-icon {
        font-size: 0.75rem;
    }
    .root-label {
        font-size: 0.6rem;
    }

    .tree-branches {
        height: 22px;
    }
    .branch-line {
        height: 1.5px;
    }

    .tree-nodes {
        gap: 4px 8px;
    }
    .tree-node {
        padding: 4px 2px 3px;
        border-radius: 8px;
    }
    .tree-node .node-icon {
        font-size: 0.65rem;
    }
    .tree-node .node-label {
        font-size: 0.48rem;
    }

    .float-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .sitemap-hero__orb--1,
    .sitemap-hero__orb--2 {
        display: none;
    }

    .sitemap-hero__shape--2 {
        display: none;
    }

    #sitemap-hero .particle--3,
    #sitemap-hero .particle--5,
    #sitemap-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #sitemap-hero {
        padding: 20px 0 40px;
    }

    .sitemap-hero__title {
        font-size: 1.8rem;
    }

    .sitemap-hero__subtitle {
        font-size: 0.9rem;
    }

    .sitemap-hero__meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sitemap-hero__meta .meta-card {
        padding: 8px 12px;
        border-radius: 10px;
    }

    .sitemap-hero__actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-sitemap-services,
    .btn-sitemap-contact {
        width: 100%;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.82rem;
    }

    .sitemap-hero__badges {
        gap: 4px 10px;
    }

    .nav-badge {
        font-size: 0.65rem;
        padding: 3px 10px 3px 8px;
    }
    .nav-badge i {
        font-size: 0.7rem;
    }

    .sitemap-hero__visual {
        min-height: 320px;
    }

    .hero-visual {
        height: 320px;
    }

    .structure-tree {
        width: 220px;
        height: 220px;
        padding: 14px;
        border-radius: 16px;
    }

    .tree-root {
        padding: 3px 10px 3px 6px;
        margin-bottom: 8px;
    }
    .root-icon {
        font-size: 0.6rem;
    }
    .root-label {
        font-size: 0.5rem;
    }

    .tree-branches {
        height: 16px;
    }
    .branch-line {
        height: 1px;
    }
    .branch-line::after {
        width: 4px;
        height: 4px;
        right: -2px;
    }

    .tree-nodes {
        gap: 3px 4px;
    }
    .tree-node {
        padding: 3px 2px 2px;
        border-radius: 6px;
    }
    .tree-node .node-icon {
        font-size: 0.5rem;
    }
    .tree-node .node-label {
        font-size: 0.4rem;
    }

    .float-icon {
        width: 26px;
        height: 26px;
        font-size: 0.6rem;
    }

    .visual-connections {
        display: none;
    }

    .orb {
        display: none;
    }

    #sitemap-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .sitemap-hero__title {
        font-size: 1.5rem;
    }

    .sitemap-hero__subtitle {
        font-size: 0.8rem;
    }

    .sitemap-hero__visual {
        min-height: 260px;
    }

    .hero-visual {
        height: 260px;
    }

    .structure-tree {
        width: 180px;
        height: 180px;
        padding: 10px;
        border-radius: 14px;
    }

    .tree-root {
        padding: 2px 8px 2px 5px;
        margin-bottom: 6px;
    }
    .root-icon {
        font-size: 0.5rem;
    }
    .root-label {
        font-size: 0.45rem;
    }

    .tree-branches {
        height: 12px;
    }

    .tree-nodes {
        gap: 2px 3px;
    }
    .tree-node {
        padding: 2px 1px 2px;
        border-radius: 4px;
    }
    .tree-node .node-icon {
        font-size: 0.4rem;
    }
    .tree-node .node-label {
        font-size: 0.35rem;
    }

    .float-icon {
        width: 20px;
        height: 20px;
        font-size: 0.5rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .sitemap-hero__title {
        font-size: 1.3rem;
    }

    .sitemap-hero__visual {
        min-height: 220px;
    }

    .hero-visual {
        height: 220px;
    }

    .structure-tree {
        width: 150px;
        height: 150px;
        padding: 8px;
    }

    .tree-root {
        padding: 2px 6px 2px 4px;
        margin-bottom: 4px;
    }
    .root-icon {
        font-size: 0.45rem;
    }
    .root-label {
        font-size: 0.4rem;
    }

    .tree-branches {
        height: 10px;
    }

    .tree-nodes {
        gap: 1px 2px;
    }
    .tree-node .node-icon {
        font-size: 0.35rem;
    }
    .tree-node .node-label {
        display: none;
    }

    .float-icon {
        width: 16px;
        height: 16px;
        font-size: 0.4rem;
    }
}

/* ==================================================
END: Sitemap Hero Banner Responsive
================================================== */

/* ==================================================
START: Main Website Pages Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #sitemap-pages {
        padding: 60px 0 40px;
    }

    .sitemap-pages__header {
        margin-bottom: 36px;
    }

    .sitemap-pages__title {
        font-size: 2.2rem;
    }

    .sitemap-pages__subtitle {
        font-size: 0.95rem;
    }

    .nav-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .nav-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .nav-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .nav-banner__title {
        font-size: 1.3rem;
    }

    .sitemap-pages__grid {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .pages-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .page-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .page-card__icon {
        font-size: 1.1rem;
        width: 28px;
    }
    .page-card__title {
        font-size: 0.78rem;
    }
    .page-card__desc {
        font-size: 0.62rem;
    }
    .page-card__badge {
        font-size: 0.45rem;
        padding: 0 8px;
        top: -4px;
        right: -2px;
    }

    .sitemap-pages__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .nav-flow {
        min-width: 600px;
        gap: 4px;
    }

    .nav-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .nav-flow-node__label {
        font-size: 0.55rem;
    }
    .nav-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .nav-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .quick-panel {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .quick-panel__section--search {
        grid-column: 1 / -1;
    }

    .notice-banner-pages {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-pages__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-pages__desc {
        max-width: 100%;
    }

    .nb-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .sitemap-pages__orb--1,
    .sitemap-pages__orb--2 {
        display: none;
    }

    .sitemap-pages__shape--2 {
        display: none;
    }

    #sitemap-pages .particle--3,
    #sitemap-pages .particle--5,
    #sitemap-pages .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #sitemap-pages {
        padding: 40px 0 30px;
    }

    .sitemap-pages__header {
        margin-bottom: 28px;
    }

    .sitemap-pages__title {
        font-size: 1.8rem;
    }

    .sitemap-pages__subtitle {
        font-size: 0.88rem;
    }

    .nav-banner__content {
        padding: 20px 16px 18px;
    }

    .nav-banner__title {
        font-size: 1.1rem;
    }
    .nav-banner__desc {
        font-size: 0.82rem;
    }

    .nav-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-pages-services,
    .btn-banner-pages-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .sitemap-pages__grid {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .pages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .page-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .page-card__icon {
        font-size: 1rem;
        width: 24px;
    }
    .page-card__title {
        font-size: 0.74rem;
    }
    .page-card__desc {
        font-size: 0.58rem;
    }
    .page-card__badge {
        display: none;
    }
    .page-card__link {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .sitemap-pages__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .nav-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .nav-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .nav-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .nav-flow-node__label {
        font-size: 0.5rem;
    }
    .nav-flow-node__connector {
        display: none;
    }

    .quick-panel {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .quick-panel__section--search {
        grid-column: 1;
    }

    .quick-panel__label {
        font-size: 0.6rem;
    }
    .quick-panel__list li a {
        font-size: 0.76rem;
    }

    .quick-panel__search {
        border-radius: 10px;
        padding: 0 4px 0 10px;
    }
    .quick-panel__input {
        font-size: 0.78rem;
        padding: 8px 10px;
    }
    .quick-panel__btn {
        font-size: 0.72rem;
        padding: 4px 14px;
    }

    .notice-banner-pages {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-pages__icon {
        font-size: 1.6rem;
    }
    .notice-banner-pages__title {
        font-size: 0.9rem;
    }
    .notice-banner-pages__desc {
        font-size: 0.76rem;
    }
    .notice-banner-pages__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .nb-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #sitemap-pages .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .sitemap-pages__title {
        font-size: 1.5rem;
    }

    .sitemap-pages__subtitle {
        font-size: 0.8rem;
    }

    .pages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .page-card {
        padding: 8px 10px;
    }
    .page-card__icon {
        font-size: 0.85rem;
        width: 20px;
    }
    .page-card__title {
        font-size: 0.68rem;
    }
    .page-card__desc {
        display: none;
    }
    .page-card__link {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .quick-panel__list--inline {
        gap: 2px 8px;
    }
    .quick-panel__list--inline li a {
        font-size: 0.7rem;
    }

    .notice-banner-pages__title {
        font-size: 0.82rem;
    }
    .notice-banner-pages__desc {
        font-size: 0.7rem;
    }

    .nb-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .sitemap-pages__title {
        font-size: 1.3rem;
    }

    .pages-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .quick-panel__list--inline {
        flex-direction: column;
        gap: 2px;
    }

    .notice-banner-pages__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Main Website Pages Responsive
================================================== */

/* ==================================================
START: Services & Solutions Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #sitemap-services {
        padding: 60px 0 40px;
    }

    .sitemap-services__header {
        margin-bottom: 36px;
    }

    .sitemap-services__title {
        font-size: 2.2rem;
    }

    .sitemap-services__subtitle {
        font-size: 0.95rem;
    }

    .services-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .services-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .services-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .services-banner__title {
        font-size: 1.3rem;
    }

    .sitemap-services__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .service-categories-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }

    .service-category-card__header {
        padding: 12px 14px 10px;
    }
    .service-category-card__title {
        font-size: 0.76rem;
    }
    .service-category-card__list li a {
        font-size: 0.7rem;
    }

    .sitemap-services__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .solutions-flow {
        min-width: 600px;
        gap: 4px;
    }

    .solutions-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .solutions-flow-node__label {
        font-size: 0.55rem;
    }
    .solutions-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .solutions-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .finder-panel {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .notice-banner-services {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-services__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-services__desc {
        max-width: 100%;
    }

    .sv-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .sitemap-services__orb--1,
    .sitemap-services__orb--2 {
        display: none;
    }

    .sitemap-services__shape--2 {
        display: none;
    }

    #sitemap-services .particle--3,
    #sitemap-services .particle--5,
    #sitemap-services .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #sitemap-services {
        padding: 40px 0 30px;
    }

    .sitemap-services__header {
        margin-bottom: 28px;
    }

    .sitemap-services__title {
        font-size: 1.8rem;
    }

    .sitemap-services__subtitle {
        font-size: 0.88rem;
    }

    .services-banner__content {
        padding: 20px 16px 18px;
    }

    .services-banner__title {
        font-size: 1.1rem;
    }
    .services-banner__desc {
        font-size: 0.82rem;
    }

    .services-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-services-all,
    .btn-banner-services-quote {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .sitemap-services__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .service-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .service-category-card__header {
        padding: 10px 12px 8px;
        gap: 8px;
    }
    .service-category-card__icon {
        font-size: 1rem;
    }
    .service-category-card__title {
        font-size: 0.72rem;
    }
    .service-category-card__toggle {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }
    .service-category-card__list li {
        padding: 3px 0;
    }
    .service-category-card__list li a {
        font-size: 0.68rem;
    }

    .sitemap-services__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .solutions-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .solutions-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .solutions-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .solutions-flow-node__label {
        font-size: 0.5rem;
    }
    .solutions-flow-node__connector {
        display: none;
    }

    .finder-panel {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .finder-panel__label {
        font-size: 0.6rem;
    }
    .finder-panel__list li a {
        font-size: 0.76rem;
    }
    .finder-panel__list--inline {
        gap: 2px 8px;
    }
    .finder-panel__list--inline li a {
        font-size: 0.7rem;
    }

    .notice-banner-services {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-services__icon {
        font-size: 1.6rem;
    }
    .notice-banner-services__title {
        font-size: 0.9rem;
    }
    .notice-banner-services__desc {
        font-size: 0.76rem;
    }
    .notice-banner-services__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .sv-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #sitemap-services .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .sitemap-services__title {
        font-size: 1.5rem;
    }

    .sitemap-services__subtitle {
        font-size: 0.8rem;
    }

    .service-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .service-category-card__header {
        padding: 8px 10px 6px;
    }
    .service-category-card__title {
        font-size: 0.68rem;
    }
    .service-category-card__list li a {
        font-size: 0.62rem;
    }

    .finder-panel__list li a {
        font-size: 0.7rem;
    }
    .finder-panel__list--inline li a {
        font-size: 0.65rem;
    }

    .notice-banner-services__title {
        font-size: 0.82rem;
    }
    .notice-banner-services__desc {
        font-size: 0.7rem;
    }

    .sv-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .sitemap-services__title {
        font-size: 1.3rem;
    }

    .service-categories-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .finder-panel__list--inline {
        flex-direction: column;
        gap: 2px;
    }

    .notice-banner-services__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Services & Solutions Responsive
================================================== */

/* ==================================================
START: Resources & Legal Pages Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #sitemap-resources {
        padding: 60px 0 40px;
    }

    .sitemap-resources__header {
        margin-bottom: 36px;
    }

    .sitemap-resources__title {
        font-size: 2.2rem;
    }

    .sitemap-resources__subtitle {
        font-size: 0.95rem;
    }

    .resources-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .resources-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .resources-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .resources-banner__title {
        font-size: 1.3rem;
    }

    .sitemap-resources__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .resource-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .resource-category-card__header {
        padding: 12px 14px 10px;
    }
    .resource-category-card__title {
        font-size: 0.76rem;
    }
    .resource-category-card__list li a {
        font-size: 0.7rem;
    }

    .sitemap-resources__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .discovery-flow {
        min-width: 600px;
        gap: 4px;
    }

    .discovery-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .discovery-flow-node__label {
        font-size: 0.55rem;
    }
    .discovery-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .discovery-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .resource-center {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .resource-center__section--search {
        grid-column: 1 / -1;
    }

    .notice-banner-resources {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-resources__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-resources__desc {
        max-width: 100%;
    }

    .rs-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .sitemap-resources__orb--1,
    .sitemap-resources__orb--2 {
        display: none;
    }

    .sitemap-resources__shape--2 {
        display: none;
    }

    #sitemap-resources .particle--3,
    #sitemap-resources .particle--5,
    #sitemap-resources .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #sitemap-resources {
        padding: 40px 0 30px;
    }

    .sitemap-resources__header {
        margin-bottom: 28px;
    }

    .sitemap-resources__title {
        font-size: 1.8rem;
    }

    .sitemap-resources__subtitle {
        font-size: 0.88rem;
    }

    .resources-banner__content {
        padding: 20px 16px 18px;
    }

    .resources-banner__title {
        font-size: 1.1rem;
    }
    .resources-banner__desc {
        font-size: 0.82rem;
    }

    .resources-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-resources-docs,
    .btn-banner-resources-blog {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .sitemap-resources__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .resource-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .resource-category-card__header {
        padding: 10px 12px 8px;
        gap: 8px;
    }
    .resource-category-card__icon {
        font-size: 1rem;
    }
    .resource-category-card__title {
        font-size: 0.72rem;
    }
    .resource-category-card__toggle {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }
    .resource-category-card__list li {
        padding: 3px 0;
    }
    .resource-category-card__list li a {
        font-size: 0.68rem;
    }
    .resource-category-card__list .badge-future {
        font-size: 0.5rem;
        padding: 0 6px;
    }

    .sitemap-resources__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .discovery-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .discovery-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .discovery-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .discovery-flow-node__label {
        font-size: 0.5rem;
    }
    .discovery-flow-node__connector {
        display: none;
    }

    .resource-center {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .resource-center__section--search {
        grid-column: 1;
    }

    .resource-center__label {
        font-size: 0.6rem;
    }
    .resource-center__list li a {
        font-size: 0.76rem;
    }

    .resource-center__search {
        border-radius: 10px;
        padding: 0 4px 0 10px;
    }
    .resource-center__input {
        font-size: 0.78rem;
        padding: 8px 10px;
    }
    .resource-center__btn {
        font-size: 0.72rem;
        padding: 4px 14px;
    }

    .notice-banner-resources {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-resources__icon {
        font-size: 1.6rem;
    }
    .notice-banner-resources__title {
        font-size: 0.9rem;
    }
    .notice-banner-resources__desc {
        font-size: 0.76rem;
    }
    .notice-banner-resources__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .rs-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #sitemap-resources .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .sitemap-resources__title {
        font-size: 1.5rem;
    }

    .sitemap-resources__subtitle {
        font-size: 0.8rem;
    }

    .resource-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .resource-category-card__header {
        padding: 8px 10px 6px;
    }
    .resource-category-card__title {
        font-size: 0.68rem;
    }
    .resource-category-card__list li a {
        font-size: 0.62rem;
    }

    .resource-center__list li a {
        font-size: 0.7rem;
    }

    .notice-banner-resources__title {
        font-size: 0.82rem;
    }
    .notice-banner-resources__desc {
        font-size: 0.7rem;
    }

    .rs-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .sitemap-resources__title {
        font-size: 1.3rem;
    }

    .resource-categories-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .notice-banner-resources__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Resources & Legal Pages Responsive
================================================== */

/* ==================================================
START: Contact, Support & Social Links Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #sitemap-contact {
        padding: 60px 0 40px;
    }

    .sitemap-contact__header {
        margin-bottom: 36px;
    }

    .sitemap-contact__title {
        font-size: 2.2rem;
    }

    .sitemap-contact__subtitle {
        font-size: 0.95rem;
    }

    .contact-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .contact-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .contact-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .contact-banner__title {
        font-size: 1.3rem;
    }

    .sitemap-contact__categories {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .contact-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .contact-category-card__header {
        padding: 12px 14px 10px;
    }
    .contact-category-card__title {
        font-size: 0.76rem;
    }
    .contact-category-card__list li a {
        font-size: 0.7rem;
    }

    .sitemap-contact__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .comm-flow {
        min-width: 600px;
        gap: 4px;
    }

    .comm-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .comm-flow-node__label {
        font-size: 0.55rem;
    }
    .comm-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .comm-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .sitemap-contact__social {
        margin-bottom: 36px;
    }

    .social-hub {
        grid-template-columns: 1fr 1fr;
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .notice-banner-contact {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-contact__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-contact__desc {
        max-width: 100%;
    }

    .ct-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .sitemap-contact__orb--1,
    .sitemap-contact__orb--2 {
        display: none;
    }

    .sitemap-contact__shape--2 {
        display: none;
    }

    #sitemap-contact .particle--3,
    #sitemap-contact .particle--5,
    #sitemap-contact .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #sitemap-contact {
        padding: 40px 0 30px;
    }

    .sitemap-contact__header {
        margin-bottom: 28px;
    }

    .sitemap-contact__title {
        font-size: 1.8rem;
    }

    .sitemap-contact__subtitle {
        font-size: 0.88rem;
    }

    .contact-banner__content {
        padding: 20px 16px 18px;
    }

    .contact-banner__title {
        font-size: 1.1rem;
    }
    .contact-banner__desc {
        font-size: 0.82rem;
    }

    .contact-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-contact-form,
    .btn-banner-contact-quote {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .sitemap-contact__categories {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .contact-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .contact-category-card__header {
        padding: 10px 12px 8px;
        gap: 8px;
    }
    .contact-category-card__icon {
        font-size: 1rem;
    }
    .contact-category-card__title {
        font-size: 0.72rem;
    }
    .contact-category-card__toggle {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }
    .contact-category-card__list li {
        padding: 3px 0;
    }
    .contact-category-card__list li a {
        font-size: 0.68rem;
    }
    .contact-category-card__list .badge-status,
    .contact-category-card__list .badge-future {
        font-size: 0.45rem;
        padding: 0 6px;
    }

    .sitemap-contact__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .comm-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .comm-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .comm-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .comm-flow-node__label {
        font-size: 0.5rem;
    }
    .comm-flow-node__connector {
        display: none;
    }

    .sitemap-contact__social {
        margin-bottom: 28px;
    }

    .social-hub {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .social-card {
        padding: 10px 12px;
        gap: 10px;
    }
    .social-card__icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .social-card__name {
        font-size: 0.75rem;
    }
    .social-card__desc {
        font-size: 0.58rem;
    }
    .social-card__link {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .notice-banner-contact {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-contact__icon {
        font-size: 1.6rem;
    }
    .notice-banner-contact__title {
        font-size: 0.9rem;
    }
    .notice-banner-contact__desc {
        font-size: 0.76rem;
    }
    .notice-banner-contact__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .ct-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #sitemap-contact .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .sitemap-contact__title {
        font-size: 1.5rem;
    }

    .sitemap-contact__subtitle {
        font-size: 0.8rem;
    }

    .contact-categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .contact-category-card__header {
        padding: 8px 10px 6px;
    }
    .contact-category-card__title {
        font-size: 0.68rem;
    }
    .contact-category-card__list li a {
        font-size: 0.62rem;
    }

    .social-hub {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .social-card {
        padding: 8px 10px;
        gap: 8px;
    }
    .social-card__icon {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    .social-card__name {
        font-size: 0.68rem;
    }
    .social-card__desc {
        display: none;
    }
    .social-card__link {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
    }

    .notice-banner-contact__title {
        font-size: 0.82rem;
    }
    .notice-banner-contact__desc {
        font-size: 0.7rem;
    }

    .ct-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .sitemap-contact__title {
        font-size: 1.3rem;
    }

    .contact-categories-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .social-hub {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .notice-banner-contact__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Contact, Support & Social Links Responsive
================================================== */

/* ==================================================
START: Final CTA & Navigation Summary Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #sitemap-final {
        padding: 60px 0 0;
    }

    .sitemap-final__header {
        margin-bottom: 36px;
    }

    .sitemap-final__title {
        font-size: 2.2rem;
    }

    .sitemap-final__subtitle {
        font-size: 0.95rem;
    }

    .final-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .final-banner__title {
        font-size: 1.3rem;
    }

    .sitemap-final__highlights {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .highlight-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .highlight-card__icon {
        font-size: 1.1rem;
        width: 28px;
    }
    .highlight-card__title {
        font-size: 0.78rem;
    }
    .highlight-card__desc {
        font-size: 0.62rem;
    }

    .sitemap-final__timeline {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .journey-timeline {
        min-width: 600px;
        gap: 4px;
    }

    .timeline-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .timeline-node__label {
        font-size: 0.55rem;
    }
    .timeline-node__connector {
        right: -6px;
        width: 12px;
    }
    .timeline-node__connector::after {
        font-size: 0.5rem;
    }

    .sitemap-final__cta {
        margin-bottom: 36px;
    }

    .final-cta {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-cta__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-cta__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .final-cta__title {
        font-size: 1.3rem;
    }

    .final-cta__icon-ring span {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .final-cta__pulse {
        width: 120px;
        height: 120px;
    }

    .fn-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .sitemap-final__orb--1,
    .sitemap-final__orb--2 {
        display: none;
    }

    .sitemap-final__shape--2 {
        display: none;
    }

    #sitemap-final .particle--3,
    #sitemap-final .particle--5,
    #sitemap-final .particle--6 {
        display: none;
    }

    .footer-transition__line {
        height: 40px;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #sitemap-final {
        padding: 40px 0 0;
    }

    .sitemap-final__header {
        margin-bottom: 28px;
    }

    .sitemap-final__title {
        font-size: 1.8rem;
    }

    .sitemap-final__subtitle {
        font-size: 0.88rem;
    }

    .final-banner__content {
        padding: 20px 16px 18px;
    }

    .final-banner__title {
        font-size: 1.1rem;
    }
    .final-banner__desc {
        font-size: 0.82rem;
    }

    .final-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-banner-final-services,
    .btn-banner-final-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .sitemap-final__highlights {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .highlight-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .highlight-card__icon {
        font-size: 1rem;
        width: 24px;
    }
    .highlight-card__title {
        font-size: 0.74rem;
    }
    .highlight-card__desc {
        font-size: 0.58rem;
    }
    .highlight-card__link {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .sitemap-final__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .journey-timeline {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .timeline-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .timeline-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .timeline-node__label {
        font-size: 0.5rem;
    }
    .timeline-node__connector {
        display: none;
    }

    .sitemap-final__cta {
        margin-bottom: 28px;
    }

    .final-cta {
        border-radius: 16px;
    }

    .final-cta__content {
        padding: 20px 16px 18px;
    }

    .final-cta__title {
        font-size: 1.1rem;
    }
    .final-cta__desc {
        font-size: 0.82rem;
    }

    .final-cta__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-final-getstarted,
    .btn-cta-final-services {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .final-cta__visual {
        min-height: 100px;
        padding: 12px;
    }

    .final-cta__icon-ring {
        gap: 10px;
    }

    .final-cta__icon-ring span {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
    .final-cta__pulse {
        width: 100px;
        height: 100px;
    }

    .fn-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #sitemap-final .particle {
        display: none;
    }

    .footer-transition__line {
        height: 30px;
    }
    .footer-transition__nodes {
        gap: 12px;
    }
    .ft-node {
        width: 4px;
        height: 4px;
    }
    .footer-transition__text {
        font-size: 0.6rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .sitemap-final__title {
        font-size: 1.5rem;
    }

    .sitemap-final__subtitle {
        font-size: 0.8rem;
    }

    .highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .highlight-card {
        padding: 8px 10px;
    }
    .highlight-card__icon {
        font-size: 0.85rem;
        width: 20px;
    }
    .highlight-card__title {
        font-size: 0.68rem;
    }
    .highlight-card__desc {
        display: none;
    }
    .highlight-card__link {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .final-cta__title {
        font-size: 1rem;
    }
    .final-cta__desc {
        font-size: 0.76rem;
    }

    .fn-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }

    .final-cta__icon-ring span {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    .final-cta__pulse {
        width: 80px;
        height: 80px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .sitemap-final__title {
        font-size: 1.3rem;
    }

    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .final-cta__title {
        font-size: 0.9rem;
    }
    .final-cta__desc {
        font-size: 0.7rem;
    }
}

/* ==================================================
END: Final CTA & Navigation Summary Responsive
================================================== */

/* ==================================================
START: 404 Hero Section Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #error-hero {
        padding: 50px 0 60px;
        min-height: auto;
    }

    .error-hero__title {
        font-size: 2.2rem;
    }

    .error-hero__subtitle {
        font-size: 0.95rem;
    }

    .error-illustration {
        width: 260px;
        height: 170px;
    }

    .error-illustration__number {
        font-size: 4.8rem;
    }

    .error-illustration__browser {
        width: 160px;
        height: 110px;
        padding: 6px 8px 8px;
    }

    .error-illustration__browser-content {
        height: 48px;
    }
    .error-illustration__browser-icon {
        font-size: 1.2rem;
    }
    .error-illustration__browser-url {
        font-size: 0.45rem;
        padding: 2px 8px;
    }

    .error-illustration__compass {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        bottom: 6px;
        right: 6px;
    }
    .error-illustration__compass-needle {
        height: 12px;
    }

    .error-illustration__search {
        font-size: 0.65rem;
        top: 2px;
        left: 8px;
    }

    .error-illustration__path--1 { width: 40px; }
    .error-illustration__path--2 { width: 30px; }
    .error-illustration__path--3 { width: 20px; }

    .error-illustration__dot--1 { width: 6px; height: 6px; }
    .error-illustration__dot--2 { width: 5px; height: 5px; }
    .error-illustration__dot--3 { width: 8px; height: 8px; }

    .error-hero__orb--1,
    .error-hero__orb--2 {
        display: none;
    }

    .error-hero__shape--2 {
        display: none;
    }

    #error-hero .particle--3,
    #error-hero .particle--5,
    #error-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #error-hero {
        padding: 40px 0 50px;
    }

    .error-hero__title {
        font-size: 1.8rem;
    }

    .error-hero__subtitle {
        font-size: 0.88rem;
        max-width: 100%;
    }

    .error-hero__actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .btn-error-home,
    .btn-error-services {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 10px 24px;
        font-size: 0.85rem;
    }

    .error-illustration {
        width: 220px;
        height: 140px;
    }

    .error-illustration__number {
        font-size: 4rem;
    }

    .error-illustration__browser {
        width: 130px;
        height: 90px;
        padding: 4px 6px 6px;
        border-radius: 8px;
    }

    .error-illustration__browser-dots span {
        width: 6px;
        height: 6px;
    }
    .error-illustration__browser-dots {
        gap: 3px;
        margin-bottom: 4px;
    }

    .error-illustration__browser-url {
        font-size: 0.4rem;
        padding: 2px 6px;
        border-radius: 4px;
        margin-bottom: 4px;
    }

    .error-illustration__browser-content {
        height: 36px;
        border-radius: 4px;
    }
    .error-illustration__browser-icon {
        font-size: 1rem;
    }

    .error-illustration__compass {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        bottom: 4px;
        right: 4px;
    }
    .error-illustration__compass-needle {
        height: 10px;
    }

    .error-illustration__search {
        font-size: 0.55rem;
        top: 2px;
        left: 6px;
    }

    .error-illustration__path--1 { width: 30px; top: 25%; left: -14px; }
    .error-illustration__path--2 { width: 22px; bottom: 20%; right: -8px; }
    .error-illustration__path--3 { width: 16px; top: 50%; left: -4px; }

    .error-illustration__dot--1 { width: 5px; height: 5px; }
    .error-illustration__dot--2 { width: 4px; height: 4px; }
    .error-illustration__dot--3 { width: 6px; height: 6px; }

    .error-hero__chips {
        gap: 6px 8px;
    }

    .error-hero__chips-label {
        font-size: 0.6rem;
        width: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 4px;
    }

    .chip {
        font-size: 0.68rem;
        padding: 4px 12px 4px 10px;
    }
    .chip i {
        font-size: 0.55rem;
    }

    .error-hero__badge {
        font-size: 0.6rem;
        padding: 3px 14px 3px 12px;
        margin-bottom: 16px;
    }

    #error-hero .particle {
        display: none;
    }

    .error-hero__glow--3 {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .error-hero__title {
        font-size: 1.5rem;
    }

    .error-hero__subtitle {
        font-size: 0.8rem;
    }

    .error-illustration {
        width: 180px;
        height: 120px;
    }

    .error-illustration__number {
        font-size: 3.2rem;
    }

    .error-illustration__browser {
        width: 110px;
        height: 76px;
        padding: 3px 4px 4px;
        border-radius: 6px;
    }

    .error-illustration__browser-dots span {
        width: 5px;
        height: 5px;
    }
    .error-illustration__browser-dots {
        gap: 2px;
        margin-bottom: 3px;
    }

    .error-illustration__browser-url {
        font-size: 0.35rem;
        padding: 1px 4px;
        border-radius: 3px;
        margin-bottom: 3px;
    }

    .error-illustration__browser-content {
        height: 28px;
        border-radius: 3px;
    }
    .error-illustration__browser-icon {
        font-size: 0.8rem;
    }

    .error-illustration__compass {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
        bottom: 2px;
        right: 2px;
    }
    .error-illustration__compass-needle {
        height: 8px;
    }

    .error-illustration__search {
        font-size: 0.45rem;
        top: 1px;
        left: 4px;
    }

    .error-illustration__path--1 { width: 20px; top: 20%; left: -10px; }
    .error-illustration__path--2 { width: 16px; bottom: 15%; right: -6px; }
    .error-illustration__path--3 { display: none; }

    .chip {
        font-size: 0.6rem;
        padding: 3px 10px 3px 8px;
    }
    .chip i {
        font-size: 0.5rem;
    }

    .btn-error-home,
    .btn-error-services {
        font-size: 0.8rem;
        padding: 8px 20px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .error-hero__title {
        font-size: 1.3rem;
    }

    .error-illustration {
        width: 150px;
        height: 100px;
    }

    .error-illustration__number {
        font-size: 2.6rem;
    }

    .error-illustration__browser {
        width: 90px;
        height: 64px;
        padding: 2px 3px 3px;
        border-radius: 4px;
    }

    .error-illustration__browser-content {
        height: 22px;
    }
    .error-illustration__browser-icon {
        font-size: 0.6rem;
    }

    .error-illustration__compass {
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
    }
    .error-illustration__compass-needle {
        height: 6px;
    }

    .chip {
        font-size: 0.55rem;
        padding: 2px 8px 2px 6px;
    }
}

/* ==================================================
END: 404 Hero Section Responsive
================================================== */

/* ==================================================
START: Smart Navigation & Quick Links Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #error-nav {
        padding: 50px 0 60px;
    }

    .error-nav__header {
        margin-bottom: 36px;
    }

    .error-nav__title {
        font-size: 2.2rem;
    }

    .error-nav__subtitle {
        font-size: 0.95rem;
    }

    .recovery-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .recovery-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .recovery-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .recovery-banner__title {
        font-size: 1.3rem;
    }

    .error-nav__grid {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .quick-links-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .quick-link-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .quick-link-card__icon {
        font-size: 1.1rem;
        width: 28px;
    }
    .quick-link-card__title {
        font-size: 0.78rem;
    }
    .quick-link-card__desc {
        font-size: 0.62rem;
    }
    .quick-link-card__badge {
        font-size: 0.45rem;
        padding: 0 8px;
        top: -4px;
        right: -2px;
    }

    .error-nav__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
        overflow-x: auto;
    }

    .recovery-flow {
        min-width: 600px;
        gap: 4px;
    }

    .recovery-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .recovery-flow-node__label {
        font-size: 0.55rem;
    }
    .recovery-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .recovery-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .destinations-panel {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 20px 20px 18px;
        border-radius: 16px;
    }

    .destinations-panel__section--search {
        grid-column: 1 / -1;
    }

    .notice-banner-error {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-error__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-error__desc {
        max-width: 100%;
    }

    .rc-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .error-nav__orb--1,
    .error-nav__orb--2 {
        display: none;
    }

    .error-nav__shape--2 {
        display: none;
    }

    #error-nav .particle--3,
    #error-nav .particle--5,
    #error-nav .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #error-nav {
        padding: 40px 0 50px;
    }

    .error-nav__header {
        margin-bottom: 28px;
    }

    .error-nav__title {
        font-size: 1.8rem;
    }

    .error-nav__subtitle {
        font-size: 0.88rem;
    }

    .recovery-banner__content {
        padding: 20px 16px 18px;
    }

    .recovery-banner__title {
        font-size: 1.1rem;
    }
    .recovery-banner__desc {
        font-size: 0.82rem;
    }

    .recovery-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-recovery-home,
    .btn-recovery-services {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .error-nav__grid {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .quick-links-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .quick-link-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .quick-link-card__icon {
        font-size: 1rem;
        width: 24px;
    }
    .quick-link-card__title {
        font-size: 0.74rem;
    }
    .quick-link-card__desc {
        font-size: 0.58rem;
    }
    .quick-link-card__badge {
        display: none;
    }
    .quick-link-card__link {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .error-nav__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 28px;
    }

    .recovery-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .recovery-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .recovery-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .recovery-flow-node__label {
        font-size: 0.5rem;
    }
    .recovery-flow-node__connector {
        display: none;
    }

    .destinations-panel {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .destinations-panel__section--search {
        grid-column: 1;
    }

    .destinations-panel__label {
        font-size: 0.6rem;
    }
    .destinations-panel__list li a {
        font-size: 0.76rem;
    }

    .destinations-panel__search {
        border-radius: 10px;
        padding: 0 4px 0 10px;
    }
    .destinations-panel__input {
        font-size: 0.78rem;
        padding: 8px 10px;
    }
    .destinations-panel__btn {
        font-size: 0.72rem;
        padding: 4px 14px;
    }

    .notice-banner-error {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-error__icon {
        font-size: 1.6rem;
    }
    .notice-banner-error__title {
        font-size: 0.9rem;
    }
    .notice-banner-error__desc {
        font-size: 0.76rem;
    }
    .notice-banner-error__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .rc-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #error-nav .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .error-nav__title {
        font-size: 1.5rem;
    }

    .error-nav__subtitle {
        font-size: 0.8rem;
    }

    .quick-links-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .quick-link-card {
        padding: 8px 10px;
    }
    .quick-link-card__icon {
        font-size: 0.85rem;
        width: 20px;
    }
    .quick-link-card__title {
        font-size: 0.68rem;
    }
    .quick-link-card__desc {
        display: none;
    }
    .quick-link-card__link {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .destinations-panel__list li a {
        font-size: 0.7rem;
    }

    .notice-banner-error__title {
        font-size: 0.82rem;
    }
    .notice-banner-error__desc {
        font-size: 0.7rem;
    }

    .rc-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .error-nav__title {
        font-size: 1.3rem;
    }

    .quick-links-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .destinations-panel__list li a {
        font-size: 0.65rem;
    }

    .notice-banner-error__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Smart Navigation & Quick Links Responsive
================================================== */

/* ==================================================
START: Popular Services & Resources Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #error-popular {
        padding: 50px 0 60px;
    }

    .error-popular__header {
        margin-bottom: 36px;
    }

    .error-popular__title {
        font-size: 2.2rem;
    }

    .error-popular__subtitle {
        font-size: 0.95rem;
    }

    .popular-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .popular-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .popular-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .popular-banner__title {
        font-size: 1.3rem;
    }

    .error-popular__services,
    .error-popular__resources {
        padding: 20px 20px 18px;
        border-radius: 18px;
    }

    .error-popular__services {
        margin-bottom: 30px;
    }
    .error-popular__resources {
        margin-bottom: 30px;
    }

    .popular-services-grid,
    .popular-resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .popular-service-card,
    .popular-resource-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .popular-service-card__icon,
    .popular-resource-card__icon {
        font-size: 1.1rem;
        width: 28px;
    }
    .popular-service-card__title,
    .popular-resource-card__title {
        font-size: 0.78rem;
    }
    .popular-service-card__desc,
    .popular-resource-card__desc {
        font-size: 0.62rem;
    }
    .popular-service-card__badge,
    .popular-resource-card__badge {
        font-size: 0.45rem;
        padding: 0 8px;
        top: -4px;
        right: -2px;
    }

    .error-popular__flow {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
        overflow-x: auto;
    }

    .discovery-flow {
        min-width: 600px;
        gap: 4px;
    }

    .discovery-flow-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .discovery-flow-node__label {
        font-size: 0.55rem;
    }
    .discovery-flow-node__connector {
        right: -6px;
        width: 12px;
    }
    .discovery-flow-node__connector::after {
        font-size: 0.5rem;
    }

    .recommendation-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        border-radius: 16px;
    }

    .recommendation-banner__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .recommendation-banner__desc {
        max-width: 100%;
    }

    .recommendation-banner__actions {
        justify-content: center;
        width: 100%;
    }

    .btn-recommend-explore,
    .btn-recommend-contact {
        flex: 1;
        justify-content: center;
        min-width: 140px;
    }

    .pp-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .error-popular__orb--1,
    .error-popular__orb--2 {
        display: none;
    }

    .error-popular__shape--2 {
        display: none;
    }

    #error-popular .particle--3,
    #error-popular .particle--5,
    #error-popular .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #error-popular {
        padding: 40px 0 50px;
    }

    .error-popular__header {
        margin-bottom: 28px;
    }

    .error-popular__title {
        font-size: 1.8rem;
    }

    .error-popular__subtitle {
        font-size: 0.88rem;
    }

    .popular-banner__content {
        padding: 20px 16px 18px;
    }

    .popular-banner__title {
        font-size: 1.1rem;
    }
    .popular-banner__desc {
        font-size: 0.82rem;
    }

    .popular-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-popular-services,
    .btn-popular-blog {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .error-popular__services,
    .error-popular__resources {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .error-popular__services {
        margin-bottom: 24px;
    }
    .error-popular__resources {
        margin-bottom: 24px;
    }

    .popular-services-grid,
    .popular-resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .popular-service-card,
    .popular-resource-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .popular-service-card__icon,
    .popular-resource-card__icon {
        font-size: 1rem;
        width: 24px;
    }
    .popular-service-card__title,
    .popular-resource-card__title {
        font-size: 0.74rem;
    }
    .popular-service-card__desc,
    .popular-resource-card__desc {
        font-size: 0.58rem;
    }
    .popular-service-card__badge,
    .popular-resource-card__badge {
        display: none;
    }
    .popular-service-card__link,
    .popular-resource-card__link {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .error-popular__flow {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .discovery-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .discovery-flow-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .discovery-flow-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .discovery-flow-node__label {
        font-size: 0.5rem;
    }
    .discovery-flow-node__connector {
        display: none;
    }

    .recommendation-banner {
        padding: 20px 16px;
        border-radius: 14px;
        gap: 14px;
    }

    .recommendation-banner__icon {
        font-size: 1.6rem;
    }
    .recommendation-banner__title {
        font-size: 0.95rem;
    }
    .recommendation-banner__desc {
        font-size: 0.8rem;
    }

    .recommendation-banner__actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-recommend-explore,
    .btn-recommend-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
        min-width: unset;
    }

    .pp-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #error-popular .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .error-popular__title {
        font-size: 1.5rem;
    }

    .error-popular__subtitle {
        font-size: 0.8rem;
    }

    .popular-services-grid,
    .popular-resources-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .popular-service-card,
    .popular-resource-card {
        padding: 8px 10px;
    }
    .popular-service-card__icon,
    .popular-resource-card__icon {
        font-size: 0.85rem;
        width: 20px;
    }
    .popular-service-card__title,
    .popular-resource-card__title {
        font-size: 0.68rem;
    }
    .popular-service-card__desc,
    .popular-resource-card__desc {
        display: none;
    }
    .popular-service-card__link,
    .popular-resource-card__link {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .recommendation-banner__title {
        font-size: 0.85rem;
    }
    .recommendation-banner__desc {
        font-size: 0.74rem;
    }

    .pp-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .error-popular__title {
        font-size: 1.3rem;
    }

    .popular-services-grid,
    .popular-resources-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .recommendation-banner__title {
        font-size: 0.78rem;
    }
}

/* ==================================================
END: Popular Services & Resources Responsive
================================================== */

/* ==================================================
START: Search & Contact Assistance Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #error-assist {
        padding: 50px 0 60px;
    }

    .error-assist__header {
        margin-bottom: 36px;
    }

    .error-assist__title {
        font-size: 2.2rem;
    }

    .error-assist__subtitle {
        font-size: 0.95rem;
    }

    .search-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .search-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .search-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .search-banner__title {
        font-size: 1.3rem;
    }

    .error-assist__search,
    .error-assist__chips,
    .error-assist__contact {
        padding: 20px 20px 18px;
        border-radius: 18px;
    }

    .error-assist__search {
        margin-bottom: 30px;
    }
    .error-assist__chips {
        margin-bottom: 30px;
    }
    .error-assist__contact {
        margin-bottom: 30px;
    }

    .smart-search__box {
        padding: 0 4px 0 12px;
        border-radius: 12px;
    }
    .smart-search__input {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
    .smart-search__btn {
        padding: 6px 18px;
        font-size: 0.8rem;
    }

    .assist-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .assist-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .assist-card__icon {
        font-size: 1.1rem;
        width: 28px;
    }
    .assist-card__title {
        font-size: 0.78rem;
    }
    .assist-card__desc {
        font-size: 0.6rem;
    }

    .notice-banner-assist {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
    }

    .notice-banner-assist__content {
        flex-direction: column;
        text-align: center;
    }

    .notice-banner-assist__desc {
        max-width: 100%;
    }

    .as-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .error-assist__orb--1,
    .error-assist__orb--2 {
        display: none;
    }

    .error-assist__shape--2 {
        display: none;
    }

    #error-assist .particle--3,
    #error-assist .particle--5,
    #error-assist .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #error-assist {
        padding: 40px 0 50px;
    }

    .error-assist__header {
        margin-bottom: 28px;
    }

    .error-assist__title {
        font-size: 1.8rem;
    }

    .error-assist__subtitle {
        font-size: 0.88rem;
    }

    .search-banner__content {
        padding: 20px 16px 18px;
    }

    .search-banner__title {
        font-size: 1.1rem;
    }
    .search-banner__desc {
        font-size: 0.82rem;
    }

    .search-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-assist-search,
    .btn-assist-contact {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .error-assist__search,
    .error-assist__chips,
    .error-assist__contact {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .error-assist__search {
        margin-bottom: 24px;
    }
    .error-assist__chips {
        margin-bottom: 24px;
    }
    .error-assist__contact {
        margin-bottom: 24px;
    }

    .smart-search__header {
        margin-bottom: 12px;
    }
    .smart-search__title {
        font-size: 0.82rem;
    }
    .smart-search__badge {
        font-size: 0.5rem;
        padding: 1px 10px;
    }

    .smart-search__box {
        border-radius: 10px;
        padding: 0 4px 0 10px;
    }
    .smart-search__input {
        font-size: 0.82rem;
        padding: 8px 10px;
    }
    .smart-search__btn {
        font-size: 0.72rem;
        padding: 5px 14px;
        border-radius: 8px;
    }
    .smart-search__box i {
        font-size: 0.8rem;
    }

    .smart-search__suggestions {
        gap: 4px 8px;
        margin-bottom: 8px;
    }
    .smart-search__suggestions-label {
        font-size: 0.6rem;
        width: 100%;
    }
    .smart-search__suggestion-chip {
        font-size: 0.62rem;
        padding: 2px 12px;
    }

    .smart-search__recent {
        padding-top: 8px;
        gap: 4px 10px;
    }
    .smart-search__recent-label {
        font-size: 0.6rem;
        width: 100%;
    }
    .smart-search__recent-item {
        font-size: 0.62rem;
    }

    .suggested-chips {
        gap: 8px;
    }

    .suggested-chip {
        font-size: 0.7rem;
        padding: 6px 14px 6px 12px;
        gap: 6px;
    }
    .suggested-chip i {
        font-size: 0.7rem;
    }

    .assist-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .assist-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .assist-card__icon {
        font-size: 1rem;
        width: 24px;
    }
    .assist-card__title {
        font-size: 0.72rem;
    }
    .assist-card__desc {
        font-size: 0.55rem;
    }
    .assist-card__link {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .notice-banner-assist {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .notice-banner-assist__icon {
        font-size: 1.6rem;
    }
    .notice-banner-assist__title {
        font-size: 0.9rem;
    }
    .notice-banner-assist__desc {
        font-size: 0.76rem;
    }
    .notice-banner-assist__badge span {
        font-size: 0.55rem;
        padding: 3px 12px;
    }

    .as-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #error-assist .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .error-assist__title {
        font-size: 1.5rem;
    }

    .error-assist__subtitle {
        font-size: 0.8rem;
    }

    .assist-cards {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .assist-card {
        padding: 8px 10px;
    }
    .assist-card__icon {
        font-size: 0.85rem;
        width: 20px;
    }
    .assist-card__title {
        font-size: 0.65rem;
    }
    .assist-card__desc {
        display: none;
    }
    .assist-card__link {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .suggested-chip {
        font-size: 0.62rem;
        padding: 4px 10px 4px 8px;
        gap: 4px;
    }
    .suggested-chip i {
        font-size: 0.6rem;
    }

    .notice-banner-assist__title {
        font-size: 0.82rem;
    }
    .notice-banner-assist__desc {
        font-size: 0.7rem;
    }

    .as-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .error-assist__title {
        font-size: 1.3rem;
    }

    .assist-cards {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .suggested-chips {
        gap: 6px;
    }

    .suggested-chip {
        font-size: 0.58rem;
        padding: 3px 8px 3px 6px;
    }

    .notice-banner-assist__title {
        font-size: 0.75rem;
    }
}

/* ==================================================
END: Search & Contact Assistance Responsive
================================================== */

/* ==================================================
START: Final CTA & Recovery Section Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #error-final {
        padding: 50px 0 0;
    }

    .error-final__header {
        margin-bottom: 36px;
    }

    .error-final__title {
        font-size: 2.2rem;
    }

    .error-final__subtitle {
        font-size: 0.95rem;
    }

    .recovery-summary {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .recovery-summary__content {
        padding: 28px 24px;
        order: 2;
    }

    .recovery-summary__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .recovery-summary__title {
        font-size: 1.3rem;
    }

    .error-final__cards {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
    }

    .recovery-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .recovery-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .recovery-card__icon {
        font-size: 1.1rem;
        width: 28px;
    }
    .recovery-card__title {
        font-size: 0.78rem;
    }
    .recovery-card__desc {
        font-size: 0.62rem;
    }

    .error-final__timeline {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
        overflow-x: auto;
    }

    .final-timeline {
        min-width: 600px;
        gap: 4px;
    }

    .final-timeline-node__icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .final-timeline-node__label {
        font-size: 0.55rem;
    }
    .final-timeline-node__connector {
        right: -6px;
        width: 12px;
    }
    .final-timeline-node__connector::after {
        font-size: 0.5rem;
    }

    .error-final__cta {
        margin-bottom: 30px;
    }

    .final-cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .final-cta-banner__content {
        padding: 28px 24px;
        order: 2;
    }

    .final-cta-banner__visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .final-cta-banner__title {
        font-size: 1.3rem;
    }

    .final-cta-banner__icon-ring span {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .final-cta-banner__pulse {
        width: 120px;
        height: 120px;
    }

    .rf-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .error-final__orb--1,
    .error-final__orb--2 {
        display: none;
    }

    .error-final__shape--2 {
        display: none;
    }

    #error-final .particle--3,
    #error-final .particle--5,
    #error-final .particle--6 {
        display: none;
    }

    .footer-transition-final__line {
        height: 40px;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #error-final {
        padding: 40px 0 0;
    }

    .error-final__header {
        margin-bottom: 28px;
    }

    .error-final__title {
        font-size: 1.8rem;
    }

    .error-final__subtitle {
        font-size: 0.88rem;
    }

    .recovery-summary__content {
        padding: 20px 16px 18px;
    }

    .recovery-summary__title {
        font-size: 1.1rem;
    }
    .recovery-summary__desc {
        font-size: 0.82rem;
    }

    .recovery-summary__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-final-home,
    .btn-final-services {
        width: 100%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .error-final__cards {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .recovery-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }

    .recovery-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .recovery-card__icon {
        font-size: 1rem;
        width: 24px;
    }
    .recovery-card__title {
        font-size: 0.74rem;
    }
    .recovery-card__desc {
        font-size: 0.58rem;
    }
    .recovery-card__link {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .error-final__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .final-timeline {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .final-timeline-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .final-timeline-node__icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .final-timeline-node__label {
        font-size: 0.5rem;
    }
    .final-timeline-node__connector {
        display: none;
    }

    .error-final__cta {
        margin-bottom: 24px;
    }

    .final-cta-banner {
        border-radius: 16px;
    }

    .final-cta-banner__content {
        padding: 20px 16px 18px;
    }

    .final-cta-banner__title {
        font-size: 1.1rem;
    }
    .final-cta-banner__desc {
        font-size: 0.82rem;
    }

    .final-cta-banner__actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-final-project,
    .btn-cta-final-team {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .final-cta-banner__visual {
        min-height: 100px;
        padding: 12px;
    }

    .final-cta-banner__icon-ring {
        gap: 10px;
    }

    .final-cta-banner__icon-ring span {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
    .final-cta-banner__pulse {
        width: 100px;
        height: 100px;
    }

    .rf-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    #error-final .particle {
        display: none;
    }

    .footer-transition-final__line {
        height: 30px;
    }
    .footer-transition-final__nodes {
        gap: 12px;
    }
    .ftf-node {
        width: 4px;
        height: 4px;
    }
    .footer-transition-final__text {
        font-size: 0.6rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .error-final__title {
        font-size: 1.5rem;
    }

    .error-final__subtitle {
        font-size: 0.8rem;
    }

    .recovery-cards {
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .recovery-card {
        padding: 8px 10px;
    }
    .recovery-card__icon {
        font-size: 0.85rem;
        width: 20px;
    }
    .recovery-card__title {
        font-size: 0.68rem;
    }
    .recovery-card__desc {
        display: none;
    }
    .recovery-card__link {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .final-cta-banner__title {
        font-size: 1rem;
    }
    .final-cta-banner__desc {
        font-size: 0.76rem;
    }

    .rf-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }

    .final-cta-banner__icon-ring span {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    .final-cta-banner__pulse {
        width: 80px;
        height: 80px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .error-final__title {
        font-size: 1.3rem;
    }

    .recovery-cards {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .final-cta-banner__title {
        font-size: 0.9rem;
    }
    .final-cta-banner__desc {
        font-size: 0.7rem;
    }
}

/* ==================================================
END: Final CTA & Recovery Section Responsive
================================================== */

/* ==================================================
START: Super Admin Sign Up Hero & Registration Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #admin-signup {
        padding: 30px 0;
    }

    .admin-signup__container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .admin-signup__brand {
        padding: 32px 28px;
        min-height: auto;
    }

    .admin-signup__brand-title {
        font-size: 1.8rem;
    }

    .admin-signup__brand-subtitle {
        font-size: 0.9rem;
    }

    .admin-signup__features {
        grid-template-columns: 1fr 1fr;
    }

    .admin-signup__form-card {
        padding: 32px 28px;
    }

    .admin-signup__form-title {
        font-size: 1.4rem;
    }

    .admin-signup__dashboard {
        display: none;
    }

    .admin-signup__glow--1 {
        width: 400px;
        height: 400px;
        top: -100px;
        right: -100px;
    }

    .admin-signup__glow--2 {
        width: 350px;
        height: 350px;
        bottom: -80px;
        left: -80px;
    }

    .admin-signup__orb--1,
    .admin-signup__orb--2 {
        display: none;
    }

    #admin-signup .particle--3,
    #admin-signup .particle--5,
    #admin-signup .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #admin-signup {
        padding: 20px 0;
    }

    .admin-signup__container {
        gap: 20px;
        padding: 0 16px;
    }

    .admin-signup__brand {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .admin-signup__badge {
        font-size: 0.55rem;
        padding: 3px 12px;
        margin-bottom: 14px;
    }

    .admin-signup__brand-title {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    .admin-signup__brand-subtitle {
        font-size: 0.82rem;
        margin-bottom: 18px;
    }

    .admin-signup__features {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 18px;
    }

    .admin-signup__feature {
        padding: 8px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .admin-signup__feature-icon {
        font-size: 0.75rem;
        width: 20px;
    }

    .admin-signup__feature-label {
        font-size: 0.68rem;
    }

    .admin-signup__quote {
        font-size: 0.8rem;
        padding: 12px 16px;
        margin-bottom: 16px;
    }

    .admin-signup__form-card {
        padding: 24px 16px;
        border-radius: 20px;
    }

    .admin-signup__form-badge {
        font-size: 0.55rem;
        padding: 2px 12px;
        margin-bottom: 12px;
    }

    .admin-signup__form-title {
        font-size: 1.2rem;
    }

    .admin-signup__form-desc {
        font-size: 0.82rem;
        margin-bottom: 20px;
    }

    .admin-signup__form {
        gap: 14px;
    }

    .admin-signup__form-input {
        height: 48px;
        padding: 14px 12px 6px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .admin-signup__form-label {
        font-size: 0.8rem;
        left: 12px;
    }

    .admin-signup__form-input:focus + .admin-signup__form-label,
    .admin-signup__form-input:not(:placeholder-shown) + .admin-signup__form-label {
        top: 10px;
        transform: translateY(0) scale(0.72);
    }

    .admin-signup__toggle-password {
        right: 10px;
        font-size: 0.8rem;
    }

    .admin-signup__password-strength {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .admin-signup__password-label {
        font-size: 0.68rem;
    }

    .admin-signup__password-requirements {
        gap: 4px 10px;
    }

    .admin-signup__password-requirements li {
        font-size: 0.62rem;
    }

    .admin-signup__form-checkbox-label {
        font-size: 0.78rem;
    }

    .admin-signup__submit {
        font-size: 0.9rem;
        padding: 12px 20px;
        border-radius: 10px;
    }

    .admin-signup__login-link {
        font-size: 0.78rem;
    }

    .admin-signup__future-item {
        font-size: 0.55rem;
        padding: 1px 8px;
    }

    .admin-signup__glow--1 {
        width: 300px;
        height: 300px;
        top: -80px;
        right: -80px;
    }

    .admin-signup__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -60px;
        left: -60px;
    }

    #admin-signup .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .admin-signup__brand-title {
        font-size: 1.2rem;
    }

    .admin-signup__features {
        grid-template-columns: 1fr 1fr;
    }

    .admin-signup__feature-label {
        font-size: 0.62rem;
    }

    .admin-signup__form-title {
        font-size: 1.1rem;
    }

    .admin-signup__form-desc {
        font-size: 0.75rem;
    }

    .admin-signup__form-input {
        height: 44px;
        font-size: 0.8rem;
    }

    .admin-signup__form-label {
        font-size: 0.72rem;
    }

    .admin-signup__submit {
        font-size: 0.82rem;
        padding: 10px 16px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .admin-signup__features {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .admin-signup__form-card {
        padding: 18px 12px;
    }
}

/* ==================================================
END: Super Admin Sign Up Hero & Registration Responsive
================================================== */

/* ==================================================
START: Super Admin Sign In Hero & Login Form Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #admin-signin {
        padding: 30px 0;
    }

    .admin-signin__container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .admin-signin__brand {
        padding: 32px 28px;
        min-height: auto;
    }

    .admin-signin__brand-title {
        font-size: 1.8rem;
    }

    .admin-signin__brand-subtitle {
        font-size: 0.9rem;
    }

    .admin-signin__features {
        grid-template-columns: 1fr 1fr;
    }

    .admin-signin__form-card {
        padding: 32px 28px;
    }

    .admin-signin__form-title {
        font-size: 1.4rem;
    }

    .admin-signin__dashboard {
        display: none;
    }

    .admin-signin__glow--1 {
        width: 400px;
        height: 400px;
        top: -100px;
        right: -100px;
    }

    .admin-signin__glow--2 {
        width: 350px;
        height: 350px;
        bottom: -80px;
        left: -80px;
    }

    .admin-signin__orb--1,
    .admin-signin__orb--2 {
        display: none;
    }

    #admin-signin .particle--3,
    #admin-signin .particle--5,
    #admin-signin .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #admin-signin {
        padding: 20px 0;
    }

    .admin-signin__container {
        gap: 20px;
        padding: 0 16px;
    }

    .admin-signin__brand {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .admin-signin__badge {
        font-size: 0.55rem;
        padding: 3px 12px;
        margin-bottom: 14px;
    }

    .admin-signin__brand-title {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    .admin-signin__brand-subtitle {
        font-size: 0.82rem;
        margin-bottom: 18px;
    }

    .admin-signin__features {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 18px;
    }

    .admin-signin__feature {
        padding: 8px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .admin-signin__feature-icon {
        font-size: 0.75rem;
        width: 20px;
    }

    .admin-signin__feature-label {
        font-size: 0.68rem;
    }

    .admin-signin__quote {
        font-size: 0.8rem;
        padding: 12px 16px;
        margin-bottom: 16px;
    }

    .admin-signin__form-card {
        padding: 24px 16px;
        border-radius: 20px;
    }

    .admin-signin__form-badge {
        font-size: 0.55rem;
        padding: 2px 12px;
        margin-bottom: 12px;
    }

    .admin-signin__form-title {
        font-size: 1.2rem;
    }

    .admin-signin__form-desc {
        font-size: 0.82rem;
        margin-bottom: 20px;
    }

    .admin-signin__form {
        gap: 14px;
    }

    .admin-signin__form-input {
        height: 48px;
        padding: 14px 12px 6px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .admin-signin__form-label {
        font-size: 0.8rem;
        left: 12px;
    }

    .admin-signin__form-input:focus + .admin-signin__form-label,
    .admin-signin__form-input:not(:placeholder-shown) + .admin-signin__form-label {
        top: 10px;
        transform: translateY(0) scale(0.72);
    }

    .admin-signin__toggle-password {
        right: 10px;
        font-size: 0.8rem;
    }

    .admin-signin__options {
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-signin__form-checkbox-label {
        font-size: 0.78rem;
    }

    .admin-signin__forgot-link {
        font-size: 0.78rem;
    }

    .admin-signin__submit {
        font-size: 0.9rem;
        padding: 12px 20px;
        border-radius: 10px;
    }

    .admin-signin__divider-text {
        font-size: 0.65rem;
    }

    .admin-signin__social {
        font-size: 0.82rem;
        padding: 10px 16px;
    }

    .admin-signin__social-badge {
        font-size: 0.5rem;
        padding: 0 8px;
    }

    .admin-signin__signup-link {
        font-size: 0.78rem;
    }

    .admin-signin__future-item {
        font-size: 0.55rem;
        padding: 1px 8px;
    }

    .admin-signin__glow--1 {
        width: 300px;
        height: 300px;
        top: -80px;
        right: -80px;
    }

    .admin-signin__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -60px;
        left: -60px;
    }

    #admin-signin .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .admin-signin__brand-title {
        font-size: 1.2rem;
    }

    .admin-signin__features {
        grid-template-columns: 1fr 1fr;
    }

    .admin-signin__feature-label {
        font-size: 0.62rem;
    }

    .admin-signin__form-title {
        font-size: 1.1rem;
    }

    .admin-signin__form-desc {
        font-size: 0.75rem;
    }

    .admin-signin__form-input {
        height: 44px;
        font-size: 0.8rem;
    }

    .admin-signin__form-label {
        font-size: 0.72rem;
    }

    .admin-signin__submit {
        font-size: 0.82rem;
        padding: 10px 16px;
    }

    .admin-signin__social {
        font-size: 0.75rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .admin-signin__features {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .admin-signin__form-card {
        padding: 18px 12px;
    }

    .admin-signin__options {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ==================================================
END: Super Admin Sign In Hero & Login Form Responsive
================================================== */

/* ==================================================
START: Hero & Brand Story Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #brand-hero {
        padding: 60px 0 40px;
    }

    .brand-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .brand-hero__title {
        font-size: 2.4rem;
    }

    .brand-hero__subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .brand-hero__actions {
        justify-content: center;
    }

    .brand-hero__logo-container {
        width: 300px;
        height: 300px;
    }

    .brand-hero__logo-text {
        font-size: 2.2rem;
    }
    .brand-hero__logo-icon {
        font-size: 2.2rem;
    }

    .brand-hero__circuit--1,
    .brand-hero__circuit--2,
    .brand-hero__circuit--3 {
        display: none;
    }

    .brand-hero__node--1,
    .brand-hero__node--2,
    .brand-hero__node--3,
    .brand-hero__node--4,
    .brand-hero__node--5,
    .brand-hero__node--6 {
        display: none;
    }

    #brand-story {
        padding: 40px 0 60px;
    }

    .brand-story__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .brand-story__content {
        gap: 30px;
    }

    .brand-story__block {
        padding-left: 44px;
    }

    .brand-story__block-number {
        font-size: 1.6rem;
    }

    .brand-story__quote-text {
        font-size: 1.1rem;
    }

    .brand-hero__orb--1,
    .brand-hero__orb--2 {
        display: none;
    }

    .brand-hero__shape--2 {
        display: none;
    }

    #brand-hero .particle--3,
    #brand-hero .particle--5,
    #brand-hero .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #brand-hero {
        padding: 40px 0 30px;
    }

    .brand-hero__inner {
        gap: 30px;
    }

    .brand-hero__badge {
        font-size: 0.6rem;
        padding: 3px 14px 3px 12px;
        margin-bottom: 14px;
    }

    .brand-hero__title {
        font-size: 1.8rem;
    }

    .brand-hero__subtitle {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .brand-hero__actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .btn-brand-services,
    .btn-brand-contact {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .brand-hero__logo-container {
        width: 220px;
        height: 220px;
    }

    .brand-hero__logo-text {
        font-size: 1.6rem;
    }
    .brand-hero__logo-icon {
        font-size: 1.8rem;
    }
    .brand-hero__logo-solutions {
        font-size: 0.7rem;
    }

    .brand-hero__glow-ring {
        display: none;
    }

    #brand-story {
        padding: 30px 0 40px;
    }

    .brand-story__grid {
        gap: 30px;
    }

    .brand-story__content {
        gap: 24px;
    }

    .brand-story__block {
        padding-left: 36px;
    }

    .brand-story__block-number {
        font-size: 1.3rem;
    }

    .brand-story__block-title {
        font-size: 1.1rem;
    }

    .brand-story__block-text {
        font-size: 0.85rem;
    }

    .brand-story__block-text--emphasized {
        padding: 12px 16px;
    }

    .brand-story__block-meaning {
        font-size: 0.9rem;
    }

    .brand-story__quote-card {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .brand-story__quote-icon {
        font-size: 2.8rem;
        top: 4px;
        left: 14px;
    }

    .brand-story__quote-text {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .brand-story__quote-name {
        font-size: 0.85rem;
    }
    .brand-story__quote-title {
        font-size: 0.72rem;
    }

    .brand-story__quote-decoration {
        width: 50px;
        height: 50px;
    }

    .brand-hero__glow--1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -80px;
    }
    .brand-hero__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        left: -60px;
    }

    #brand-hero .particle {
        display: none;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .brand-hero__title {
        font-size: 1.5rem;
    }

    .brand-hero__subtitle {
        font-size: 0.82rem;
    }

    .brand-hero__logo-container {
        width: 180px;
        height: 180px;
    }

    .brand-hero__logo-text {
        font-size: 1.3rem;
    }
    .brand-hero__logo-icon {
        font-size: 1.5rem;
    }
    .brand-hero__logo-solutions {
        font-size: 0.6rem;
    }

    .brand-story__block {
        padding-left: 28px;
    }

    .brand-story__block-number {
        font-size: 1.1rem;
    }

    .brand-story__quote-text {
        font-size: 0.85rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .brand-hero__title {
        font-size: 1.3rem;
    }

    .brand-hero__logo-container {
        width: 150px;
        height: 150px;
    }

    .brand-hero__logo-text {
        font-size: 1.1rem;
    }
    .brand-hero__logo-icon {
        font-size: 1.2rem;
    }
    .brand-hero__logo-solutions {
        font-size: 0.55rem;
    }

    .brand-story__block {
        padding-left: 24px;
    }

    .brand-story__block-number {
        font-size: 0.9rem;
    }
}

/* ==================================================
END: Hero & Brand Story Responsive
================================================== */

/* ==================================================
START: Logo Meaning & Symbolism Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #brand-symbolism {
        padding: 40px 0 60px;
    }

    .brand-symbolism__header {
        margin-bottom: 36px;
    }

    .brand-symbolism__title {
        font-size: 2.2rem;
    }

    .brand-symbolism__subtitle {
        font-size: 0.95rem;
    }

    .brand-symbolism__showcase {
        padding: 30px 20px;
        margin-bottom: 36px;
    }

    .brand-symbolism__logo-display {
        min-height: 280px;
    }

    .brand-symbolism__logo-text {
        font-size: 2.2rem;
    }
    .brand-symbolism__logo-icon {
        font-size: 2rem;
    }

    .brand-symbolism__hotspot-label {
        font-size: 0.5rem;
        padding: 1px 8px;
    }
    .brand-symbolism__hotspot-dot {
        width: 10px;
        height: 10px;
    }
    .brand-symbolism__hotspot-line {
        width: 16px;
    }

    .brand-symbolism__hotspot--xo { top: 8%; left: 12%; }
    .brand-symbolism__hotspot--hub { top: 8%; right: 12%; }
    .brand-symbolism__hotspot--circuit { bottom: 18%; left: 6%; }
    .brand-symbolism__hotspot--green { bottom: 18%; right: 6%; }
    .brand-symbolism__hotspot--purple { top: 42%; left: 2%; }
    .brand-symbolism__hotspot--typography { top: 42%; right: 2%; }

    .brand-symbolism__cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .brand-symbolism__card {
        padding: 20px 18px 16px;
    }

    .brand-symbolism__timeline {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
        overflow-x: auto;
    }

    .brand-symbolism__timeline-flow {
        min-width: 600px;
        gap: 4px;
    }

    .brand-symbolism__timeline-icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .brand-symbolism__timeline-label {
        font-size: 0.55rem;
    }
    .brand-symbolism__timeline-connector {
        right: -6px;
        width: 12px;
    }
    .brand-symbolism__timeline-connector::after {
        font-size: 0.5rem;
    }

    .brand-symbolism__quote-banner {
        padding: 28px 24px;
        border-radius: 18px;
    }

    .brand-symbolism__quote-text {
        font-size: 1.1rem;
    }

    .brand-symbolism__orb--1,
    .brand-symbolism__orb--2 {
        display: none;
    }

    #brand-symbolism .particle--3,
    #brand-symbolism .particle--5,
    #brand-symbolism .particle--6 {
        display: none;
    }

    .brand-symbolism__node--1,
    .brand-symbolism__node--2,
    .brand-symbolism__node--3,
    .brand-symbolism__node--4,
    .brand-symbolism__node--5,
    .brand-symbolism__node--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #brand-symbolism {
        padding: 30px 0 40px;
    }

    .brand-symbolism__header {
        margin-bottom: 28px;
    }

    .brand-symbolism__title {
        font-size: 1.8rem;
    }

    .brand-symbolism__subtitle {
        font-size: 0.88rem;
    }

    .brand-symbolism__showcase {
        padding: 20px 12px;
        margin-bottom: 28px;
        border-radius: 18px;
    }

    .brand-symbolism__logo-display {
        min-height: 220px;
        padding: 12px;
    }

    .brand-symbolism__logo {
        padding: 16px 20px;
    }
    .brand-symbolism__logo-text {
        font-size: 1.6rem;
    }
    .brand-symbolism__logo-icon {
        font-size: 1.6rem;
    }
    .brand-symbolism__logo-solutions {
        font-size: 0.7rem;
    }
    .brand-symbolism__logo-tagline {
        font-size: 0.6rem;
    }

    .brand-symbolism__hotspot {
        display: none;
    }

    .brand-symbolism__active-indicator {
        display: none;
    }

    .brand-symbolism__cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .brand-symbolism__card {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }
    .brand-symbolism__card-icon {
        font-size: 1.1rem;
    }
    .brand-symbolism__card-title {
        font-size: 0.9rem;
    }
    .brand-symbolism__card-text {
        font-size: 0.78rem;
    }
    .brand-symbolism__card-number {
        display: none;
    }
    .brand-symbolism__card-color {
        width: 24px;
        height: 24px;
    }

    .brand-symbolism__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-symbolism__timeline-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .brand-symbolism__timeline-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .brand-symbolism__timeline-icon {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }
    .brand-symbolism__timeline-label {
        font-size: 0.5rem;
    }
    .brand-symbolism__timeline-connector {
        display: none;
    }

    .brand-symbolism__quote-banner {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .brand-symbolism__quote-icon {
        font-size: 2.8rem;
        left: 10px;
    }

    .brand-symbolism__quote-text {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }

    .brand-symbolism__quote-name {
        font-size: 0.85rem;
    }
    .brand-symbolism__quote-title {
        font-size: 0.72rem;
    }

    .brand-symbolism__quote-decoration {
        width: 60px;
        height: 60px;
    }

    .brand-symbolism__glow--1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -80px;
    }
    .brand-symbolism__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        left: -60px;
    }

    #brand-symbolism .particle {
        display: none;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .brand-symbolism__title {
        font-size: 1.5rem;
    }

    .brand-symbolism__subtitle {
        font-size: 0.8rem;
    }

    .brand-symbolism__logo-display {
        min-height: 180px;
    }
    .brand-symbolism__logo-text {
        font-size: 1.3rem;
    }
    .brand-symbolism__logo-icon {
        font-size: 1.3rem;
    }
    .brand-symbolism__logo-solutions {
        font-size: 0.6rem;
    }
    .brand-symbolism__logo-tagline {
        font-size: 0.55rem;
    }

    .brand-symbolism__cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .brand-symbolism__card {
        padding: 12px 10px 10px;
    }
    .brand-symbolism__card-title {
        font-size: 0.8rem;
    }
    .brand-symbolism__card-text {
        font-size: 0.7rem;
    }

    .brand-symbolism__quote-text {
        font-size: 0.85rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .brand-symbolism__title {
        font-size: 1.3rem;
    }

    .brand-symbolism__cards-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .brand-symbolism__logo-display {
        min-height: 150px;
    }
    .brand-symbolism__logo-text {
        font-size: 1.1rem;
    }
    .brand-symbolism__logo-icon {
        font-size: 1.1rem;
    }
    .brand-symbolism__logo-solutions {
        font-size: 0.55rem;
    }
}

/* ==================================================
END: Logo Meaning & Symbolism Responsive
================================================== */

/* ==================================================
START: Brand Colors, Typography & Design Language Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #brand-identity {
        padding: 40px 0 60px;
    }

    .brand-identity__header {
        margin-bottom: 36px;
    }

    .brand-identity__title {
        font-size: 2.2rem;
    }

    .brand-identity__subtitle {
        font-size: 0.95rem;
    }

    .brand-identity__showcase {
        padding: 30px 24px;
        margin-bottom: 36px;
    }

    .brand-identity__showcase-inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .brand-identity__logo-lockup {
        justify-content: center;
    }

    .brand-identity__ui-preview {
        justify-content: center;
    }

    .brand-identity__colors {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .brand-identity__colors-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .brand-identity__color-card {
        padding: 16px 18px 18px;
    }

    .brand-identity__typography {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
    }

    .brand-identity__typography-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .brand-identity__type-card {
        padding: 16px 18px 18px;
    }

    .brand-identity__type-sample--h1 {
        font-size: 1.5rem;
    }
    .brand-identity__type-sample--h2 {
        font-size: 1.2rem;
    }

    .brand-identity__principles {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
    }

    .brand-identity__principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .brand-identity__principle {
        padding: 16px 18px;
    }

    .brand-identity__guidelines-banner {
        padding: 28px 24px;
        border-radius: 18px;
    }

    .brand-identity__guidelines-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .brand-identity__guidelines-title {
        font-size: 1.1rem;
    }
    .brand-identity__guidelines-desc {
        font-size: 0.88rem;
        max-width: 100%;
    }

    .brand-identity__orb--1,
    .brand-identity__orb--2 {
        display: none;
    }

    #brand-identity .particle--3,
    #brand-identity .particle--5,
    #brand-identity .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #brand-identity {
        padding: 30px 0 40px;
    }

    .brand-identity__header {
        margin-bottom: 28px;
    }

    .brand-identity__title {
        font-size: 1.8rem;
    }

    .brand-identity__subtitle {
        font-size: 0.88rem;
    }

    .brand-identity__showcase {
        padding: 20px 16px;
        border-radius: 18px;
        margin-bottom: 28px;
    }

    .brand-identity__logo-text {
        font-size: 1.4rem;
    }
    .brand-identity__logo-icon {
        font-size: 1.4rem;
    }
    .brand-identity__logo-solutions {
        font-size: 0.6rem;
    }

    .brand-identity__palette-swatch {
        width: 28px;
        height: 28px;
    }

    .brand-identity__ui-preview {
        gap: 12px;
    }
    .brand-identity__ui-card {
        padding: 8px 12px 10px;
        min-width: 60px;
    }
    .brand-identity__ui-btn {
        font-size: 0.6rem;
        padding: 4px 12px;
    }
    .brand-identity__ui-icon {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
    }

    .brand-identity__colors {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-identity__colors-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .brand-identity__color-card {
        padding: 14px 14px 16px;
        border-radius: 12px;
    }
    .brand-identity__color-swatch-inner {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .brand-identity__color-name {
        font-size: 0.8rem;
    }
    .brand-identity__color-hex {
        font-size: 0.6rem;
    }
    .brand-identity__color-desc {
        font-size: 0.7rem;
    }

    .brand-identity__typography {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-identity__typography-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .brand-identity__type-card {
        padding: 14px 14px 16px;
        border-radius: 12px;
    }
    .brand-identity__type-heading {
        font-size: 0.7rem;
    }
    .brand-identity__type-sample--h1 {
        font-size: 1.2rem;
    }
    .brand-identity__type-sample--h2 {
        font-size: 1rem;
    }
    .brand-identity__type-sample--h3 {
        font-size: 0.9rem;
    }
    .brand-identity__type-sample--body {
        font-size: 0.78rem;
    }
    .brand-identity__type-sample--body-sm {
        font-size: 0.68rem;
    }
    .brand-identity__type-desc {
        font-size: 0.6rem;
    }
    .brand-identity__type-btn {
        font-size: 0.6rem;
        padding: 4px 12px;
    }

    .brand-identity__principles {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-identity__principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .brand-identity__principle {
        padding: 14px 14px;
        border-radius: 12px;
    }
    .brand-identity__principle-title {
        font-size: 0.85rem;
    }
    .brand-identity__principle-desc {
        font-size: 0.72rem;
    }

    .brand-identity__guidelines-banner {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .brand-identity__guidelines-icon {
        font-size: 1.8rem;
    }
    .brand-identity__guidelines-title {
        font-size: 0.95rem;
    }
    .brand-identity__guidelines-desc {
        font-size: 0.8rem;
    }

    .brand-identity__guidelines-decoration {
        width: 60px;
        height: 60px;
    }

    .brand-identity__glow--1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -80px;
    }
    .brand-identity__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        left: -60px;
    }

    #brand-identity .particle {
        display: none;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .brand-identity__title {
        font-size: 1.5rem;
    }

    .brand-identity__subtitle {
        font-size: 0.8rem;
    }

    .brand-identity__colors-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .brand-identity__color-card {
        padding: 12px 12px 14px;
    }
    .brand-identity__color-swatch-inner {
        width: 30px;
        height: 30px;
    }

    .brand-identity__typography-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .brand-identity__type-card {
        padding: 12px 12px 14px;
    }
    .brand-identity__type-sample--h1 {
        font-size: 1rem;
    }
    .brand-identity__type-sample--h2 {
        font-size: 0.9rem;
    }

    .brand-identity__principles-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .brand-identity__principle {
        padding: 12px 12px;
    }
    .brand-identity__principle-title {
        font-size: 0.78rem;
    }
    .brand-identity__principle-desc {
        font-size: 0.68rem;
    }

    .brand-identity__guidelines-title {
        font-size: 0.85rem;
    }
    .brand-identity__guidelines-desc {
        font-size: 0.74rem;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .brand-identity__title {
        font-size: 1.3rem;
    }

    .brand-identity__colors-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .brand-identity__typography-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .brand-identity__principles-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .brand-identity__showcase-inner {
        gap: 14px;
    }

    .brand-identity__ui-preview {
        flex-direction: column;
        align-items: center;
    }
}

/* ==================================================
END: Brand Colors, Typography & Design Language Responsive
================================================== */

/* ==================================================
START: Mission, Vision & Core Values Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #brand-purpose {
        padding: 40px 0 60px;
    }

    .brand-purpose__header {
        margin-bottom: 36px;
    }

    .brand-purpose__title {
        font-size: 2.2rem;
    }

    .brand-purpose__subtitle {
        font-size: 0.95rem;
    }

    .brand-purpose__showcase {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-bottom: 36px;
    }

    .brand-purpose__card {
        padding: 28px 24px 24px;
        border-radius: 20px;
    }

    .brand-purpose__card-title {
        font-size: 1.2rem;
    }
    .brand-purpose__card-text {
        font-size: 0.88rem;
    }

    .brand-purpose__values {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 36px;
    }

    .brand-purpose__values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .brand-purpose__value {
        padding: 18px 20px 20px;
    }

    .brand-purpose__timeline {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
        overflow-x: auto;
    }

    .brand-purpose__timeline-flow {
        min-width: 600px;
        gap: 4px;
    }

    .brand-purpose__timeline-icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .brand-purpose__timeline-label {
        font-size: 0.55rem;
    }
    .brand-purpose__timeline-connector {
        right: -6px;
        width: 12px;
    }
    .brand-purpose__timeline-connector::after {
        font-size: 0.5rem;
    }

    .brand-purpose__commitment-banner {
        padding: 28px 24px;
        border-radius: 18px;
    }

    .brand-purpose__commitment-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .brand-purpose__commitment-title {
        font-size: 1.1rem;
    }
    .brand-purpose__commitment-desc {
        font-size: 0.88rem;
        max-width: 100%;
    }

    .brand-purpose__orb--1,
    .brand-purpose__orb--2 {
        display: none;
    }

    #brand-purpose .particle--3,
    #brand-purpose .particle--5,
    #brand-purpose .particle--6 {
        display: none;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #brand-purpose {
        padding: 30px 0 40px;
    }

    .brand-purpose__header {
        margin-bottom: 28px;
    }

    .brand-purpose__title {
        font-size: 1.8rem;
    }

    .brand-purpose__subtitle {
        font-size: 0.88rem;
    }

    .brand-purpose__showcase {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }

    .brand-purpose__card {
        padding: 22px 18px 20px;
        border-radius: 18px;
    }
    .brand-purpose__card-icon {
        font-size: 1.4rem;
    }
    .brand-purpose__card-title {
        font-size: 1.1rem;
    }
    .brand-purpose__card-text {
        font-size: 0.82rem;
    }
    .brand-purpose__card-accent {
        width: 50px;
        height: 3px;
    }

    .brand-purpose__values {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-purpose__values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .brand-purpose__value {
        padding: 14px 14px 16px;
        border-radius: 12px;
    }
    .brand-purpose__value-icon {
        font-size: 1.1rem;
    }
    .brand-purpose__value-title {
        font-size: 0.85rem;
    }
    .brand-purpose__value-desc {
        font-size: 0.72rem;
    }

    .brand-purpose__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-purpose__timeline-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .brand-purpose__timeline-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .brand-purpose__timeline-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .brand-purpose__timeline-label {
        font-size: 0.5rem;
    }
    .brand-purpose__timeline-connector {
        display: none;
    }

    .brand-purpose__commitment-banner {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .brand-purpose__commitment-icon {
        font-size: 1.8rem;
    }
    .brand-purpose__commitment-title {
        font-size: 0.95rem;
    }
    .brand-purpose__commitment-desc {
        font-size: 0.8rem;
    }

    .brand-purpose__commitment-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-commitment-services,
    .btn-commitment-project {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .brand-purpose__commitment-decoration {
        width: 60px;
        height: 60px;
    }

    .brand-purpose__glow--1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -80px;
    }
    .brand-purpose__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        left: -60px;
    }

    #brand-purpose .particle {
        display: none;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .brand-purpose__title {
        font-size: 1.5rem;
    }

    .brand-purpose__subtitle {
        font-size: 0.8rem;
    }

    .brand-purpose__values-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .brand-purpose__value {
        padding: 12px 12px 14px;
    }
    .brand-purpose__value-title {
        font-size: 0.78rem;
    }
    .brand-purpose__value-desc {
        font-size: 0.68rem;
    }

    .brand-purpose__commitment-title {
        font-size: 0.85rem;
    }
    .brand-purpose__commitment-desc {
        font-size: 0.74rem;
    }

    .brand-purpose__card {
        padding: 18px 14px 16px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .brand-purpose__title {
        font-size: 1.3rem;
    }

    .brand-purpose__values-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .brand-purpose__showcase {
        gap: 12px;
    }
}

/* ==================================================
END: Mission, Vision & Core Values Responsive
================================================== */

/* ==================================================
START: Final CTA – Join Our Journey Responsive
================================================== */

/* Tablet */
@media (max-width: 992px) {
    #brand-final {
        padding: 40px 0 0;
    }

    .brand-final__header {
        margin-bottom: 36px;
    }

    .brand-final__title {
        font-size: 2.2rem;
    }

    .brand-final__subtitle {
        font-size: 0.95rem;
    }

    .brand-final__legacy-banner {
        padding: 28px 24px;
        border-radius: 20px;
        margin-bottom: 36px;
    }

    .brand-final__legacy-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .brand-final__legacy-title {
        font-size: 1.1rem;
    }
    .brand-final__legacy-desc {
        font-size: 0.88rem;
        max-width: 100%;
    }

    .brand-final__highlights {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
    }

    .brand-final__highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .brand-final__highlight {
        padding: 16px 18px 18px;
    }

    .brand-final__timeline {
        padding: 20px 20px 18px;
        border-radius: 18px;
        margin-bottom: 30px;
        overflow-x: auto;
    }

    .brand-final__timeline-flow {
        min-width: 600px;
        gap: 4px;
    }

    .brand-final__timeline-icon {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .brand-final__timeline-label {
        font-size: 0.55rem;
    }
    .brand-final__timeline-connector {
        right: -6px;
        width: 12px;
    }
    .brand-final__timeline-connector::after {
        font-size: 0.5rem;
    }

    .brand-final__cta {
        margin-bottom: 30px;
    }

    .brand-final__cta-banner {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .brand-final__cta-content {
        padding: 28px 24px;
        order: 2;
    }

    .brand-final__cta-visual {
        min-height: 120px;
        order: 1;
        padding: 16px;
    }

    .brand-final__cta-title {
        font-size: 1.3rem;
    }

    .brand-final__cta-icon-ring span {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .brand-final__cta-pulse {
        width: 120px;
        height: 120px;
    }

    .brand-final__legacy-decoration {
        width: 80px;
        height: 80px;
    }

    .brand-final__orb--1,
    .brand-final__orb--2 {
        display: none;
    }

    #brand-final .particle--3,
    #brand-final .particle--5,
    #brand-final .particle--6 {
        display: none;
    }

    .footer-transition-brand__line {
        height: 40px;
    }
}

/* Mobile Landscape */
@media (max-width: 576px) {
    #brand-final {
        padding: 30px 0 0;
    }

    .brand-final__header {
        margin-bottom: 28px;
    }

    .brand-final__title {
        font-size: 1.8rem;
    }

    .brand-final__subtitle {
        font-size: 0.88rem;
    }

    .brand-final__legacy-banner {
        padding: 20px 16px;
        border-radius: 16px;
        margin-bottom: 28px;
    }

    .brand-final__legacy-icon {
        font-size: 1.8rem;
    }
    .brand-final__legacy-title {
        font-size: 0.95rem;
    }
    .brand-final__legacy-desc {
        font-size: 0.8rem;
    }

    .brand-final__legacy-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-legacy-services,
    .btn-legacy-contact {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .brand-final__highlights {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-final__highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .brand-final__highlight {
        padding: 14px 14px 16px;
        border-radius: 12px;
    }
    .brand-final__highlight-icon {
        font-size: 1.1rem;
    }
    .brand-final__highlight-title {
        font-size: 0.85rem;
    }
    .brand-final__highlight-desc {
        font-size: 0.72rem;
    }

    .brand-final__timeline {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 24px;
    }

    .brand-final__timeline-flow {
        min-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        padding: 8px 4px;
    }

    .brand-final__timeline-node {
        flex: none;
        min-width: 50px;
        padding: 4px 6px;
    }
    .brand-final__timeline-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .brand-final__timeline-label {
        font-size: 0.5rem;
    }
    .brand-final__timeline-connector {
        display: none;
    }

    .brand-final__cta {
        margin-bottom: 24px;
    }

    .brand-final__cta-banner {
        border-radius: 16px;
    }

    .brand-final__cta-content {
        padding: 20px 16px 18px;
    }

    .brand-final__cta-title {
        font-size: 1.1rem;
    }
    .brand-final__cta-desc {
        font-size: 0.82rem;
    }

    .brand-final__cta-actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cta-final-project,
    .btn-cta-final-portfolio {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .brand-final__cta-visual {
        min-height: 100px;
        padding: 12px;
    }

    .brand-final__cta-icon-ring {
        gap: 10px;
    }

    .brand-final__cta-icon-ring span {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
    .brand-final__cta-pulse {
        width: 100px;
        height: 100px;
    }

    .brand-final__legacy-decoration {
        width: 60px;
        height: 60px;
    }

    .brand-final__glow--1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -80px;
    }
    .brand-final__glow--2 {
        width: 250px;
        height: 250px;
        bottom: -80px;
        left: -60px;
    }

    #brand-final .particle {
        display: none;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .section-header__count {
        font-size: 0.6rem;
        padding: 1px 10px;
    }

    .footer-transition-brand__line {
        height: 30px;
    }
    .footer-transition-brand__nodes {
        gap: 12px;
    }
    .ftb-node {
        width: 4px;
        height: 4px;
    }
    .footer-transition-brand__text {
        font-size: 0.6rem;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .brand-final__title {
        font-size: 1.5rem;
    }

    .brand-final__subtitle {
        font-size: 0.8rem;
    }

    .brand-final__highlights-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .brand-final__highlight {
        padding: 12px 12px 14px;
    }
    .brand-final__highlight-title {
        font-size: 0.78rem;
    }
    .brand-final__highlight-desc {
        font-size: 0.68rem;
    }

    .brand-final__cta-title {
        font-size: 1rem;
    }
    .brand-final__cta-desc {
        font-size: 0.76rem;
    }

    .brand-final__legacy-title {
        font-size: 0.85rem;
    }
    .brand-final__legacy-desc {
        font-size: 0.74rem;
    }

    .brand-final__cta-icon-ring span {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    .brand-final__cta-pulse {
        width: 80px;
        height: 80px;
    }
}

/* Extra small */
@media (max-width: 320px) {
    .brand-final__title {
        font-size: 1.3rem;
    }

    .brand-final__highlights-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .brand-final__cta-title {
        font-size: 0.9rem;
    }
    .brand-final__cta-desc {
        font-size: 0.7rem;
    }
}

/* ==================================================
END: Final CTA – Join Our Journey Responsive
================================================== */   


/* ============================================================
   XOHUB SOLUTIONS TOP BAR - ENHANCED RESPONSIVENESS
   Additional breakpoints for ultra-wide and improved touch targets
   ============================================================ */

/* Ultra-wide displays (1920px+) */
@media (min-width: 1921px) {
    .XoHubSolutions-TopBarText,
    .top-bar__text {
        font-size: 0.82rem;
    }

    .XoHubSolutions-TopBarLink,
    .top-bar__link {
        font-size: 0.76rem;
        padding: 3px 0;
    }

    .XoHubSolutions-SocialIcon,
    .social-icon {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
}

/* Large Desktop (1440px-1920px) - Optimal viewing */
@media (min-width: 1441px) and (max-width: 1920px) {
    .XoHubSolutions-TopBarInner {
        padding: 0 32px;
    }

    .XoHubSolutions-TopBarText,
    .top-bar__text {
        font-size: 0.80rem;
    }
}

/* Standard Desktop (1024px-1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .XoHubSolutions-TopBarSocials,
    .top-bar__socials {
        gap: 10px;
    }

    .XoHubSolutions-TopBarNav,
    .top-bar__nav {
        gap: 16px;
    }
}

/* Tablet Landscape (768px-1024px) - Improved touch targets */
@media (min-width: 769px) and (max-width: 1024px) {
    #XoHubSolutions-TopBar,
    #top-bar {
        height: 40px;
    }

    .XoHubSolutions-TopBarIcon,
    .top-bar__icon {
        font-size: 0.85rem;
    }

    .XoHubSolutions-SocialIcon,
    .social-icon {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
        /* Touch-friendly spacing */
        margin: 0 2px;
    }

    .XoHubSolutions-TopBarLink,
    .top-bar__link {
        /* Minimum touch target 44px */
        padding: 4px 8px;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
    }
}

/* Tablet Portrait specific improvements (768px) */
@media (max-width: 768px) {
    #XoHubSolutions-TopBar,
    #top-bar {
        height: 38px;
    }

    .XoHubSolutions-TopBarInner,
    .top-bar__inner {
        justify-content: center;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .XoHubSolutions-TopBarLeft,
    .top-bar__left {
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
    }

    .XoHubSolutions-TopBarIcon,
    .top-bar__icon {
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .XoHubSolutions-TopBarText,
    .top-bar__text {
        font-size: 0.65rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        min-width: 0;
    }

    .XoHubSolutions-TopBarSocials,
    .top-bar__socials {
        gap: 8px;
        flex-shrink: 0;
    }

    .XoHubSolutions-SocialIcon,
    .social-icon {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    .XoHubSolutions-MainNav {
        height: 68px;
    }

    .XoHubSolutions-LogoImage,
    .logo__image {
        width: 28px;
        height: 28px;
    }
}

/* Mobile Landscape (576px) - Hide text, show limited socials */
@media (max-width: 576px) {
    .XoHubSolutions-TopBarText,
    .top-bar__text {
        display: none;
    }

    .XoHubSolutions-TopBarLeft,
    .top-bar__left {
        gap: 0;
    }

    .XoHubSolutions-TopBarIcon,
    .top-bar__icon {
        font-size: 0.7rem;
    }

    /* Show only first 3 social icons */
    .XoHubSolutions-TopBarSocials .XoHubSolutions-SocialIcon:nth-child(n+4),
    .top-bar__socials .social-icon:nth-child(n+4) {
        display: none;
    }

    .XoHubSolutions-TopBarSocials,
    .top-bar__socials {
        gap: 6px;
    }

    .XoHubSolutions-SocialIcon,
    .social-icon {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }

    #XoHubSolutions-TopBar,
    #top-bar {
        height: 34px;
    }

    .XoHubSolutions-MainNav {
        height: 60px;
    }

    .XoHubSolutions-LogoImage,
    .logo__image {
        width: 140px;
        height: 140px;
    }

    /* Client Cards - Mobile */
    .client-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 32px 0;
    }

    .client-card {
        padding: 18px;
        gap: 14px;
    }

    .client-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .client-card__company {
        width: 100%;
    }

    .client-badge {
        align-self: flex-start;
    }

    .client-card__feedback {
        padding: 12px;
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    /* XoHubSolutions Top Stats - Mobile */
    .XoHubSolutions-TopStats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 36px;
        padding-top: 36px;
        max-width: 480px;
    }

    .XoHubSolutions-TopStatCard {
        padding: 16px 14px;
        min-height: 80px;
        gap: 10px;
        flex-direction: column;
        text-align: center;
    }

    .XoHubSolutions-TopStatIcon {
        width: 44px;
        height: 44px;
    }

    .XoHubSolutions-TopStatIcon i {
        font-size: 1.0625rem;
    }

    .XoHubSolutions-TopStatValue {
        font-size: 1.25rem;
    }

    .XoHubSolutions-TopStatLabel {
        font-size: 0.7rem;
    }

    /* XoHubSolutions Impact - Mobile */
    .XoHubSolutions-ImpactSection {
        padding: 48px 0;
    }

    .XoHubSolutions-ImpactTitle {
        font-size: 1.875rem;
    }

    .XoHubSolutions-ImpactSubtitle {
        font-size: 0.875rem;
        max-width: 40ch;
    }

    .XoHubSolutions-ImpactGrid {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 420px;
    }

    .XoHubSolutions-ImpactCard {
        padding: 28px 20px;
    }

    .XoHubSolutions-ImpactIcon {
        width: 52px;
        height: 52px;
        font-size: 1.25rem;
    }

    .XoHubSolutions-ImpactNumber {
        font-size: 2.375rem;
    }

    .XoHubSolutions-CounterSuffix {
        font-size: 1.625rem;
    }

    .XoHubSolutions-ImpactLabel {
        font-size: 0.875rem;
    }

    .XoHubSolutions-ImpactDescription {
        font-size: 0.75rem;
        max-width: 32ch;
    }

    /* XoHubSolutions Services CTA - Mobile */
    .XoHubSolutions-ServicesCTA {
        margin-top: 48px;
        padding: 32px 24px;
        gap: 20px;
    }

    .XoHubSolutions-CTATitle {
        font-size: 1.625rem;
    }

    .XoHubSolutions-CTADescription {
        font-size: 0.875rem;
    }

    .XoHubSolutions-PrimaryCTA {
        padding: 16px 32px;
        font-size: 0.9375rem;
        min-width: auto;
    }

    /* Stats - Mobile */
    .stats-section {
        padding: 48px 0;
    }

    .stats__title {
        font-size: 1.75rem;
    }

    .stats__subtitle {
        font-size: 0.875rem;
        max-width: 38ch;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 400px;
    }

    .stat-card {
        padding: 24px 18px;
    }

    .stat-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.125rem;
    }

    .stat-card__number {
        font-size: 2.25rem;
    }

    .stat-suffix {
        font-size: 1.5rem;
    }

    .stat-card__label {
        font-size: 0.8125rem;
    }

    .stat-card__description {
        font-size: 0.75rem;
        max-width: 32ch;
    }

    /* Services - Mobile */
    .services-section {
        padding: 48px 0;
    }

    .services__title {
        font-size: 1.75rem;
    }

    .services__subtitle {
        font-size: 0.875rem;
        max-width: 42ch;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 24px 20px;
    }

    .service-card__icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .service-badge {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    .service-card__title {
        font-size: 1.0625rem;
    }

    .service-card__description {
        font-size: 0.8125rem;
    }

    .service-card__tech li {
        font-size: 0.8rem;
    }

    .service-card__button {
        padding: 12px 24px;
    }

    .services-cta {
        margin-top: 40px;
        padding: 32px 20px;
    }

    .services-cta__title {
        font-size: 1.5rem;
    }

    .services-cta__description {
        font-size: 0.9375rem;
    }

    .services-cta__button {
        padding: 14px 28px;
    }
        line-height: 1.5;
    }

    .trusted-by__metrics {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
        padding-top: 32px;
    }

    .trust-metric {
        padding: 16px;
    }

    .trust-metric__value {
        font-size: 1.25rem;
    }
}

/* Small phones (425px) - Minimal top bar */
@media (max-width: 425px) {
    /* Hide all socials on very small screens */
    .XoHubSolutions-TopBarSocials,
    .top-bar__socials {
        display: none;
    }

    .XoHubSolutions-TopBarRight,
    .top-bar__right {
        gap: 0;
    }

    .XoHubSolutions-TopBarLeft,
    .top-bar__left {
        justify-content: center;
        width: 100%;
    }

    .XoHubSolutions-TopBarIcon,
    .top-bar__icon {
        font-size: 0.65rem;
    }

    #XoHubSolutions-TopBar,
    #top-bar {
        height: 30px;
    }

    .XoHubSolutions-MainNav {
        height: 54px;
    }

    .XoHubSolutions-LogoImage,
    .logo__image {
        width: 22px;
        height: 22px;
    }

    /* XoHubSolutions Top Stats - Small Mobile */
    .XoHubSolutions-TopStats {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 360px;
    }

    .XoHubSolutions-TopStatCard {
        padding: 16px;
        min-height: auto;
        flex-direction: row;
        text-align: left;
    }

    .XoHubSolutions-TopStatIcon {
        width: 42px;
        height: 42px;
    }

    .XoHubSolutions-TopStatIcon i {
        font-size: 1rem;
    }

    .XoHubSolutions-TopStatValue {
        font-size: 1.125rem;
    }

    .XoHubSolutions-TopStatLabel {
        font-size: 0.6875rem;
    }

    /* XoHubSolutions Impact - Small Mobile */
    .XoHubSolutions-ImpactTitle {
        font-size: 1.625rem;
    }

    .XoHubSolutions-ImpactSubtitle {
        font-size: 0.8125rem;
    }

    .XoHubSolutions-ImpactCard {
        padding: 24px 18px;
    }

    .XoHubSolutions-ImpactIcon {
        width: 48px;
        height: 48px;
        font-size: 1.125rem;
    }

    .XoHubSolutions-ImpactNumber {
        font-size: 2.125rem;
    }

    .XoHubSolutions-CounterSuffix {
        font-size: 1.5rem;
    }

    .XoHubSolutions-ImpactLabel {
        font-size: 0.8125rem;
    }

    .XoHubSolutions-ImpactDescription {
        font-size: 0.7rem;
        max-width: 30ch;
    }

    /* XoHubSolutions Services CTA - Small Mobile */
    .XoHubSolutions-ServicesCTA {
        padding: 28px 20px;
    }

    .XoHubSolutions-CTATitle {
        font-size: 1.5rem;
    }

    .XoHubSolutions-CTADescription {
        font-size: 0.8125rem;
    }

    .XoHubSolutions-PrimaryCTA {
        padding: 14px 28px;
        font-size: 0.875rem;
    }

    /* Stats - Small Mobile */
    .stats__title {
        font-size: 1.5rem;
    }

    .stats__subtitle {
        font-size: 0.8125rem;
    }

    .stat-card {
        padding: 20px 16px;
    }

    .stat-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .stat-card__number {
        font-size: 2rem;
    }

    .stat-suffix {
        font-size: 1.375rem;
    }

    .stat-card__label {
        font-size: 0.8rem;
    }

    .stat-card__description {
        font-size: 0.7rem;
        max-width: 30ch;
    }

    /* Services - Small Mobile */
    .services__title {
        font-size: 1.5rem;
    }

    .services__subtitle {
        font-size: 0.8125rem;
    }

    .services-grid {
        gap: 16px;
    }

    .service-card {
        padding: 20px 16px;
        gap: 12px;
    }

    .service-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.375rem;
    }

    .service-badge {
        font-size: 0.625rem;
        padding: 3px 7px;
    }

    .service-card__title {
        font-size: 1rem;
    }

    .service-card__description {
        font-size: 0.8rem;
    }

    .service-card__tech {
        gap: 6px;
    }

    .service-card__tech li {
        font-size: 0.75rem;
    }

    .service-card__button {
        padding: 10px 20px;
        font-size: 0.8125rem;
    }

    .services-cta {
        padding: 28px 18px;
    }

    .services-cta__title {
        font-size: 1.375rem;
    }

    .services-cta__description {
        font-size: 0.875rem;
    }

    .services-cta__button {
        padding: 12px 24px;
        font-size: 0.875rem;
    }

    /* Client Cards - Small phones */
    .client-cards-grid {
        gap: 16px;
        margin: 24px 0;
    }

    .client-card {
        padding: 16px;
        gap: 12px;
    }

    .client-card__logo {
        width: 40px;
        height: 40px;
    }

    .client-card__logo i {
        font-size: 1.125rem;
    }

    .client-card__name {
        font-size: 1rem;
    }

    .client-card__location {
        font-size: 0.8125rem;
    }

    .client-meta__item {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    .client-badge {
        font-size: 0.6875rem;
        padding: 5px 10px;
    }

    .client-card__feedback {
        font-size: 0.8rem;
        padding: 10px;
    }

    .trust-metric {
        padding: 14px;
        gap: 10px;
    }

    .trust-metric__icon {
        width: 40px;
        height: 40px;
    }

    .trust-metric__icon i {
        font-size: 1rem;
    }

    .trust-metric__value {
        font-size: 1.125rem;
    }

    .trust-metric__label {
        font-size: 0.75rem;
    }
}

/* Extra small (375px) - Minimum viable interface */
@media (max-width: 375px) {
    #XoHubSolutions-TopBar,
    #top-bar {
        height: 28px;
    }

    .XoHubSolutions-TopBarIcon,
    .top-bar__icon {
        font-size: 0.6rem;
    }

    .XoHubSolutions-MainNav {
        height: 50px;
    }

    .XoHubSolutions-LogoImage,
    .logo__image {
        width: 20px;
        height: 20px;
    }
}

/* Tiny screens (320px) - Absolute minimum */
@media (max-width: 320px) {
    #XoHubSolutions-TopBar,
    #top-bar {
        height: 26px;
    }

    .XoHubSolutions-TopBarIcon,
    .top-bar__icon {
        font-size: 0.55rem;
    }

    .XoHubSolutions-MainNav {
        height: 48px;
    }

    .XoHubSolutions-LogoImage,
    .logo__image {
        width: 18px;
        height: 18px;
    }

    .XoHubSolutions-Hamburger,
    .hamburger {
        padding: 4px 2px;
    }

    .XoHubSolutions-HamburgerLine,
    .hamburger__line {
        width: 18px;
        height: 1.5px;
    }
}

/* ============================================================
   ACCESSIBILITY & TOUCH IMPROVEMENTS
   ============================================================ */

/* Ensure minimum touch target size on all devices */
@media (hover: none) and (pointer: coarse) {
    .XoHubSolutions-SocialIcon,
    .social-icon {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .XoHubSolutions-TopBarLink,
    .top-bar__link {
        min-height: 44px;
        padding: 8px 12px;
    }

    .XoHubSolutions-Hamburger,
    .hamburger {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .XoHubSolutions-TopBar,
    #top-bar {
        border-bottom-width: 2px;
    }

    .XoHubSolutions-SocialIcon,
    .social-icon {
        border: 1px solid currentColor;
    }

    .XoHubSolutions-TopBarLink::after,
    .top-bar__link::after {
        height: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .XoHubSolutions-SocialIcon,
    .social-icon {
        transition: none;
        transform: none !important;
    }

    .XoHubSolutions-TopBarLink::after,
    .top-bar__link::after {
        transition: none;
    }

    #XoHubSolutions-TopBar,
    #top-bar {
        transition: none;
    }
}