/* ============================================================
   CLAWBID — RESPONSIVE.CSS
   Version     : 2.0.0
   Updated     : 2026-03-15
   Strategy    : Mobile First → Progressive Enhancement
   Sync        : header.php v2.0 (--nav-height: 70px)
   Breakpoints :
     xs  : 0–575px      (phones portrait)
     sm  : 576–767px    (phones landscape)
     md  : 768–991px    (tablets)
     lg  : 992–1199px   (small laptops)
     xl  : 1200–1399px  (laptops/desktops)
     xxl : 1400px+      (large screens)
   ============================================================ */


/* ============================================================
   00. CRITICAL BASE — Sync with header.php
       FIX: navbar overlap on mobile
   ============================================================ */

:root {
    --nav-height:     70px;
    --nav-height-sm:  60px;
    --cb-purple:      #6c63ff;
    --cb-pink:        #f857a6;
    --cb-dark:        #0a0818;
    --cb-dark-2:      #0f0c29;
    --cb-dark-3:      #1a1533;
    --cb-border:      rgba(108, 99, 255, 0.15);
    --cb-text:        #e2e0ff;
    --cb-text-muted:  #a78bfa;
    --cb-transition:  0.2s ease;
    --radius-sm:      10px;
    --radius-md:      14px;
    --radius-lg:      18px;
    --radius-xl:      24px;
}

/* Global reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body.clawbid-body {
    background: var(--cb-dark);
    color: var(--cb-text);
    font-family: 'Inter', 'Poppins', sans-serif;
    overflow-x: hidden;
    /* KEY FIX: always push content below fixed navbar */
    padding-top: var(--nav-height) !important;
}
img, video, iframe { max-width: 100%; height: auto; }
body, html { max-width: 100vw; }
* { -webkit-tap-highlight-color: transparent; }


/* ============================================================
   01. XXL — 1400px and above
   ============================================================ */
@media (min-width: 1400px) {

    .hero-title       { font-size: 4.2rem; }
    .page-hero-title  { font-size: 3.8rem; }
    .cb-hero          { padding: 140px 0 100px; }
    .cb-section       { padding: 100px 0; }
    .cta-box          { padding: 4rem; }
    .contact-form-wrap { padding: 3rem; }
    .tl-card          { width: calc(50% - 60px); }
    .psi-item         { padding: 0.6rem 1.25rem; }
    .footer-brand-desc { max-width: 320px; }
    .service-detail-card  { padding: 2.5rem; }
    .portfolio-full-card  { padding: 2.5rem; }
}


/* ============================================================
   02. XL — 1200px to 1399px
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .hero-title      { font-size: 3.6rem; }
    .page-hero-title { font-size: 3rem; }
    .cb-section      { padding: 90px 0; }
    .cb-nav-link     { padding: 0.45rem 0.75rem !important; font-size: 0.88rem; }
    .tl-card         { width: calc(50% - 55px); }
}


/* ============================================================
   03. LG — 992px to 1199px
   ============================================================ */
@media (max-width: 1199.98px) {

    /* Global */
    .cb-section    { padding: 70px 0; }
    .section-title { font-size: 2.1rem; }

    /* Hero */
    .hero-title        { font-size: 3rem; }
    .page-hero-title   { font-size: 2.8rem; }
    .cb-hero           { padding: 120px 0 80px; }

    /* Navbar */
    .cb-nav-link  { padding: 0.45rem 0.7rem !important; font-size: 0.875rem; }
    .cb-nav-cta   { padding: 0.42rem 1rem !important; }
    .cb-brand     { font-size: 1.35rem; }

    /* Services Strip */
    .strip-item   { padding: 0.9rem 1.1rem; font-size: 0.84rem; }

    /* Service Detail */
    .service-detail-title { font-size: 1.9rem; }
    .service-detail-card  { padding: 1.75rem; }

    /* Portfolio */
    .pstat-box strong { font-size: 1.3rem; }
    .portfolio-full-card { padding: 1.75rem; }
    .saas-project-card   { padding: 1.75rem; }
    .community-card      { padding: 1.75rem; }

    /* CTA */
    .cta-box   { padding: 3rem; }
    .cta-title { font-size: 2rem; }

    /* Process */
    .step-title  { font-size: 2rem; }
    .step-bg-num { font-size: 5.5rem; }
    .tl-card     { width: calc(50% - 50px); }

    /* Contact */
    .contact-form-wrap { padding: 2.25rem; }
}


/* ============================================================
   04. MD — 768px to 991px  (Tablets)
       KEY: navbar switches to hamburger here
   ============================================================ */
@media (max-width: 991.98px) {

    /* Body padding = navbar height */
    body.clawbid-body { padding-top: var(--nav-height) !important; }

    /* Global */
    .cb-section     { padding: 60px 0; }
    .cb-section-sm  { padding: 40px 0; }
    .section-title  { font-size: 1.9rem; }
    .section-sub    { font-size: 0.9rem; }
    .section-header { margin-bottom: 2.5rem; }

    /* ---- NAVBAR MOBILE (synced with header.php) ---- */
    /* Desktop links hidden via header.php inline CSS */
    /* cb-mobile-menu appears below navbar at top: var(--nav-height) */

    /* Navbar inner padding */
    #cbNavbar .cb-nav-inner { padding: 0 1rem; }

    /* Prevent layout shift when mobile menu opens */
    body.menu-open { overflow: hidden; }

    /* ---- HERO ---- */
    .hero-title       { font-size: 2.5rem; }
    .page-hero-title  { font-size: 2.4rem; }
    .cb-hero          { padding: 110px 0 70px; min-height: auto; }
    .cb-page-hero     { padding: 130px 0 70px; min-height: auto; }
    .hero-desc        { font-size: 0.95rem; max-width: 100%; }
    .hero-badge       { font-size: 0.78rem; }
    .hero-img-wrap    { margin-top: 2.5rem; max-width: 80%; margin-left: auto; margin-right: auto; }

    /* ---- SERVICES STRIP ---- */
    .services-strip-inner {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .services-strip-inner::-webkit-scrollbar { display: none; }
    .strip-item { flex-shrink: 0; }

    /* ---- SERVICE DETAIL ---- */
    .service-detail-card  { padding: 1.5rem; }
    .service-detail-title { font-size: 1.75rem; }
    .sdc-header           { font-size: 0.88rem; }

    /* ---- PORTFOLIO ---- */
    .pstats-inner   { justify-content: center; gap: 1.25rem; }
    .pstat-box      { flex: 1 0 calc(50% - 1.25rem); justify-content: center; }

    /* Filter */
    .filter-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-btn { flex-shrink: 0; }

    /* Cards */
    .portfolio-full-card { padding: 1.5rem; }
    .saas-project-card   { padding: 1.5rem; }
    .community-card      { padding: 1.5rem; }
    .testimonial-card    { padding: 1.5rem; }

    /* Process Strip */
    .portfolio-process-strip {
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 1.5rem 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pps-arrow { display: none; }

    /* ---- PROCESS PAGE ---- */
    .step-title  { font-size: 1.85rem; }
    .step-bg-num { font-size: 5rem; top: -15px; }
    .step-desc   { font-size: 0.9rem; }
    .step-visual-card { padding: 1.75rem; }

    /* Timeline — collapse to single column */
    .tl-center-line { left: 26px; transform: none; }
    .timeline-item  { flex-direction: row !important; align-items: flex-start; }
    .tl-dot {
        left: 26px; transform: none;
        position: relative; margin-right: 1rem;
        flex-shrink: 0;
        width: 42px; height: 42px;
        font-size: 1rem; top: 0;
    }
    .tl-card       { width: 100% !important; margin: 0 !important; }
    .timeline-wrap { padding-left: 10px; }

    /* Process Intro Strip */
    .process-strip-inner {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-bottom: 0.35rem;
        -webkit-overflow-scrolling: touch;
    }
    .process-strip-inner::-webkit-scrollbar { display: none; }
    .psi-item      { flex-shrink: 0; }
    .psi-connector { display: none; }
    .step-act-item:hover { transform: none; }

    /* ---- CONTACT ---- */
    .contact-strip-inner { flex-wrap: wrap; }
    .csi-item {
        flex: 1 0 48%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .csi-item:nth-child(odd)        { border-right: 1px solid rgba(255,255,255,0.05); }
    .csi-item:nth-last-child(-n+2)  { border-bottom: none; }
    .contact-form-wrap { padding: 2rem; }
    .contact-info-card { padding: 1.75rem; }

    /* ---- CTA ---- */
    .cta-box   { padding: 2.5rem; border-radius: var(--radius-xl); }
    .cta-title { font-size: 1.85rem; }
    .cta-sub   { font-size: 0.9rem; }

    /* ---- FOOTER ---- */
    .footer-brand-desc { max-width: 100%; }
    .cb-footer         { padding: 50px 0 0; }
}


/* ============================================================
   05. SM — 576px to 767px  (Large Phones / Landscape)
   ============================================================ */
@media (max-width: 767.98px) {

    /* Global */
    .cb-section     { padding: 50px 0; }
    .cb-section-sm  { padding: 35px 0; }
    .section-title  { font-size: 1.75rem; }
    .section-sub    { font-size: 0.875rem; }
    .section-header { margin-bottom: 2rem; }
    .section-tag    { font-size: 0.75rem; padding: 0.28rem 0.8rem; }

    /* Navbar */
    .cb-logo-text  { font-size: 1.2rem; }
    .cb-logo-icon  { width: 34px; height: 34px; font-size: 0.95rem; }
    .cb-hamburger  { width: 40px; height: 40px; }

    /* Hero */
    .cb-hero          { padding: 100px 0 60px; }
    .cb-page-hero     { padding: 115px 0 55px; }
    .hero-title       { font-size: 2rem; letter-spacing: -0.3px; }
    .page-hero-title  { font-size: 2rem; }
    .hero-desc        { font-size: 0.9rem; }
    .hero-stats       { gap: 1rem; }
    .hero-stat strong { font-size: 1.4rem; }
    .hero-btns        { gap: 0.6rem; }
    .hero-btns .btn   { font-size: 0.875rem; padding: 0.6rem 1.4rem; }
    .hero-badge       { font-size: 0.76rem; padding: 0.35rem 0.85rem; }

    /* Services Strip */
    .strip-item { padding: 0.75rem 1rem; font-size: 0.82rem; }

    /* Service Detail */
    .service-detail-card  { padding: 1.5rem; }
    .sdc-stats            { gap: 0.4rem; }
    .wp-score-cards       { grid-template-columns: 1fr 1fr; }
    .speed-value          { font-size: 1.4rem; }
    .speed-meter          { width: 110px; height: 110px; }
    .speed-meter::before  { width: 80px; height: 80px; }

    /* Portfolio */
    .pstat-box       { flex: 1 0 calc(50% - 1rem); }
    .pstat-icon      { width: 42px; height: 42px; font-size: 1.05rem; }
    .pfc-result-item { min-width: calc(33% - 0.5rem); }
    .cc-metrics      { grid-template-columns: 1fr 1fr; }
    .growth-stats-grid { grid-template-columns: 1fr 1fr; }
    .spc-top         { gap: 0.75rem; }
    .spc-icon        { width: 44px; height: 44px; font-size: 1.25rem; border-radius: var(--radius-md); }
    .testimonial-card { padding: 1.25rem; }
    .testi-quote     { font-size: 2rem; }

    /* Process */
    .step-title       { font-size: 1.7rem; }
    .step-badge       { font-size: 0.78rem; }
    .step-bg-num      { font-size: 4.5rem; }
    .step-visual-card { padding: 1.5rem; }
    .svc-header       { gap: 0.75rem; }
    .svc-icon         { width: 42px; height: 42px; font-size: 1.1rem; }
    .tl-card   { padding: 1.25rem; }
    .tl-card h4{ font-size: 0.95rem; }
    .tl-card p { font-size: 0.8rem; }
    .why-process-card { padding: 1.5rem; }
    .wpc-icon         { width: 50px; height: 50px; font-size: 1.25rem; }

    /* Contact */
    .contact-form-wrap { padding: 1.5rem; }
    .cfh-icon          { width: 44px; height: 44px; font-size: 1.1rem; }
    .cfh-header h3     { font-size: 1.05rem; }
    .contact-info-card { padding: 1.5rem; }
    .why-contact-card  { padding: 1.5rem; }
    .cb-submit-btn     { padding: 0.75rem !important; font-size: 0.92rem !important; }
    .contact-faq-card  { padding: 1.5rem; }

    /* CTA */
    .cta-box   { padding: 2rem; border-radius: 20px; }
    .cta-title { font-size: 1.6rem; }
    .cta-sub   { font-size: 0.875rem; }

    /* Footer */
    .footer-divider .d-flex {
        flex-direction: column;
        gap: 0.6rem;
        text-align: center;
    }
    .footer-bottom-links { justify-content: center; }
    .footer-copy         { text-align: center; }
    .footer-social       { justify-content: flex-start; }

    /* About */
    .about-stat-grid { grid-template-columns: 1fr 1fr; }
    .team-avatar     { width: 70px; height: 70px; font-size: 1.5rem; }
}


/* ============================================================
   06. XS — 0 to 575px  (Mobile Portrait — Primary Target)
   ============================================================ */
@media (max-width: 575.98px) {

    /* Global */
    .cb-section       { padding: 45px 0; }
    .cb-section-sm    { padding: 30px 0; }
    .section-title    { font-size: 1.5rem; line-height: 1.25; }
    .section-sub      { font-size: 0.85rem; }
    .section-header   { margin-bottom: 1.75rem; }
    .section-tag      { font-size: 0.72rem; padding: 0.25rem 0.75rem; letter-spacing: 1px; }
    .container        { padding-left: 1rem; padding-right: 1rem; }

    /* ---- BUTTONS ---- */
    .cb-btn-primary,
    .cb-btn-outline   { padding: 0.6rem 1.25rem; font-size: 0.85rem; }
    .btn-lg           { font-size: 0.9rem !important; padding: 0.65rem 1.4rem !important; }
    /* Minimum touch target 44px */
    .btn,
    .cb-btn-primary,
    .cb-btn-outline,
    .cb-nav-cta       { min-height: 44px; }

    /* ---- NAVBAR (XS) ---- */
    body.clawbid-body  { padding-top: var(--nav-height) !important; }
    .cb-logo-text      { font-size: 1.1rem; }
    .cb-logo-icon      { width: 30px; height: 30px; font-size: 0.88rem; border-radius: 8px; }
    .cb-hamburger      { width: 36px; height: 36px; border-radius: 8px; }
    .hb-line           { width: 20px; }

    /* ---- HERO ---- */
    .cb-hero           { padding: 95px 0 55px; }
    .cb-page-hero      { padding: 105px 0 50px; min-height: auto; }
    .hero-title        { font-size: 1.75rem; letter-spacing: -0.4px; line-height: 1.2; }
    .page-hero-title   { font-size: 1.75rem; line-height: 1.2; }
    .page-hero-sub     { font-size: 0.875rem; }
    .hero-desc         { font-size: 0.875rem; line-height: 1.75; }
    .hero-badge        { font-size: 0.72rem; padding: 0.3rem 0.75rem; gap: 0.35rem; }
    .hero-badge-dot    { width: 6px; height: 6px; }
    .hero-btns         { flex-direction: column; gap: 0.6rem; }
    .hero-btns .btn    { width: 100%; justify-content: center; font-size: 0.9rem; }
    .hero-stats        { gap: 0.85rem; flex-wrap: wrap; }
    .hero-stat         { flex: 1 0 calc(50% - 0.85rem); }
    .hero-stat strong  { font-size: 1.3rem; }
    .hero-stat span    { font-size: 0.72rem; }
    .cb-breadcrumb     { font-size: 0.8rem; }
    .page-orb-1        { width: 250px; height: 250px; top: -60px; right: -60px; }
    .page-orb-2        { width: 200px; height: 200px; bottom: -50px; left: -50px; }

    /* ---- SERVICES STRIP ---- */
    .strip-item { padding: 0.7rem 0.9rem; font-size: 0.8rem; gap: 0.4rem; }
    .strip-item i { font-size: 0.9rem; }

    /* ---- SERVICE DETAIL CARDS ---- */
    .service-detail-badge { font-size: 0.76rem; padding: 0.35rem 0.85rem; }
    .service-detail-title { font-size: 1.5rem; }
    .service-detail-desc  { font-size: 0.875rem; }
    .service-detail-card  { padding: 1.25rem; }
    .sdc-header           { font-size: 0.85rem; }
    .sdc-stats            { flex-wrap: wrap; }
    .sdc-stat             { min-width: calc(50% - 0.25rem); }
    .sdc-stat strong      { font-size: 1.1rem; }
    .sdc-chart            { padding: 0.85rem; }
    .chart-bars           { height: 55px; }
    .wp-score-cards       { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .wsc-circle           { width: 44px; height: 44px; }
    .wsc-item strong      { font-size: 0.85rem; }
    .speed-meter          { width: 100px; height: 100px; }
    .speed-meter::before  { width: 72px; height: 72px; }
    .speed-value          { font-size: 1.3rem; }
    .speed-label          { font-size: 0.62rem; }
    .code-window          { border-radius: var(--radius-sm); }
    .cw-body pre          { font-size: 0.7rem; line-height: 1.6; }
    .tech-tag             { font-size: 0.7rem; }

    /* ---- PORTFOLIO ---- */
    .cb-portfolio-stats { padding: 1.5rem 0; }
    .pstats-inner       { gap: 1rem; }
    .pstat-box          { flex: 1 0 calc(50% - 1rem); }
    .pstat-box strong   { font-size: 1.2rem; }
    .pstat-box span     { font-size: 0.72rem; }
    .pstat-icon         { width: 38px; height: 38px; font-size: 0.95rem; border-radius: var(--radius-sm); }

    /* Filter */
    .filter-btn { padding: 0.45rem 1rem; font-size: 0.8rem; }

    /* Portfolio Cards */
    .portfolio-full-card   { padding: 1.25rem; border-radius: var(--radius-lg); }
    .pfc-icon-wrap         { width: 44px; height: 44px; border-radius: var(--radius-md); font-size: 1.2rem; }
    .pfc-meta h3           { font-size: 0.95rem; }
    .pfc-desc              { font-size: 0.82rem; }
    .pfc-result-item       { min-width: calc(50% - 0.4rem); padding: 0.6rem 0.4rem; }
    .pfc-result-item strong{ font-size: 0.82rem; }
    .pfc-result-item small { font-size: 0.6rem; }

    .saas-project-card { padding: 1.25rem; border-radius: var(--radius-lg); }
    .spc-icon          { width: 40px; height: 40px; font-size: 1.15rem; border-radius: var(--radius-md); }
    .spc-top h3        { font-size: 1rem; }
    .spc-desc          { font-size: 0.83rem; }
    .spc-features li   { font-size: 0.8rem; }

    .community-card      { padding: 1.25rem; border-radius: var(--radius-lg); }
    .cc-platform-icon    { width: 44px; height: 44px; font-size: 1.2rem; border-radius: var(--radius-md); }
    .cc-header h3        { font-size: 0.9rem; }
    .cc-desc             { font-size: 0.82rem; }
    .cc-metrics          { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .cc-metric strong    { font-size: 0.88rem; }
    .cc-metric small     { font-size: 0.6rem; }
    .cc-strategy-list li { font-size: 0.8rem; }

    .testimonial-card    { padding: 1.25rem; border-radius: var(--radius-md); }
    .testi-review        { font-size: 0.83rem; }
    .testi-author strong { font-size: 0.85rem; }

    /* Portfolio Process */
    .portfolio-process-strip { padding: 1.25rem 0.85rem; gap: 0.3rem; }
    .pps-icon  { width: 38px; height: 38px; font-size: 1rem; border-radius: var(--radius-sm); }
    .pps-item span { font-size: 0.7rem; }

    /* Growth */
    .growth-stats-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .gsg-item strong   { font-size: 1.1rem; }
    .gsg-item small    { font-size: 0.65rem; }
    .growth-chart      { padding: 0.85rem; }
    .gc-bars           { height: 45px; }

    /* ---- PROCESS PAGE ---- */
    .step-badge     { font-size: 0.74rem; padding: 0.3rem 0.8rem; }
    .step-title     { font-size: 1.5rem; }
    .step-desc      { font-size: 0.875rem; }
    .step-bg-num    { font-size: 4rem; top: -12px; left: -6px; }
    .step-act-item  { padding: 0.75rem; border-radius: var(--radius-md); gap: 0.7rem; }
    .step-act-icon  { width: 34px; height: 34px; font-size: 0.9rem; border-radius: var(--radius-sm); }
    .step-act-item div strong { font-size: 0.83rem; }
    .step-act-item div span   { font-size: 0.78rem; }

    .step-visual-card  { padding: 1.25rem; border-radius: var(--radius-lg); }
    .svc-icon          { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 11px; }
    .svc-header h4     { font-size: 0.92rem; }

    .dc-item  { font-size: 0.82rem; padding: 0.4rem 0.6rem; }
    .dpl-top  { font-size: 0.78rem; }
    .dpl-status { font-size: 0.64rem; }
    .sc-label { font-size: 0.78rem; }
    .sc-pct   { font-size: 0.72rem; }
    .lc-item  { font-size: 0.78rem; }
    .launch-success-badge { padding: 0.75rem; border-radius: var(--radius-md); }
    .launch-success-badge strong { font-size: 0.85rem; }

    /* Timeline */
    .tl-center-line { display: none; }
    .timeline-wrap  { padding-left: 0; }
    .timeline-item  { margin-bottom: 1.5rem; }
    .tl-dot         { width: 36px; height: 36px; font-size: 0.9rem; border-width: 2px; }
    .tl-card        { padding: 1rem; border-radius: var(--radius-md); }
    .tl-card h4     { font-size: 0.9rem; }
    .tl-card p      { font-size: 0.78rem; }
    .tl-outputs span { font-size: 0.68rem; }

    /* Process Intro Strip */
    .psi-item { padding: 0.4rem 0.6rem; }
    .psi-icon { width: 36px; height: 36px; font-size: 0.95rem; border-radius: var(--radius-sm); }
    .psi-item span:last-child { font-size: 0.72rem; }

    .why-process-card    { padding: 1.25rem; border-radius: var(--radius-md); }
    .wpc-icon            { width: 46px; height: 46px; font-size: 1.15rem; border-radius: var(--radius-md); }
    .why-process-card h4 { font-size: 0.95rem; }
    .why-process-card p  { font-size: 0.83rem; }

    /* FAQ */
    .cb-acc-btn  { font-size: 0.85rem !important; padding: 0.875rem 1rem !important; }
    .cb-acc-body { font-size: 0.82rem !important; padding: 0 1rem 1rem 1.25rem !important; }
    .faq-num     { font-size: 0.7rem; min-width: 18px; }

    /* ---- CONTACT ---- */
    /* Strip — full width stacked on XS */
    .contact-strip-inner { flex-direction: column; }
    .csi-item {
        flex: 1 0 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding: 1rem;
    }
    .csi-item:nth-child(odd) { border-right: none; }
    .csi-item:last-child     { border-bottom: none; }
    .csi-icon  { width: 38px; height: 38px; font-size: 0.95rem; border-radius: var(--radius-sm); }
    .csi-item small { font-size: 0.65rem; }
    .csi-item span  { font-size: 0.83rem; }

    /* Form */
    .contact-form-wrap { padding: 1.25rem; border-radius: var(--radius-lg); }
    .cfh-header        { gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; }
    .cfh-icon          { width: 42px; height: 42px; font-size: 1rem; border-radius: var(--radius-md); }
    .cfh-header h3     { font-size: 1rem; }
    .cfh-header p      { font-size: 0.8rem; }
    .cb-label          { font-size: 0.78rem; }
    /* FIX: iOS prevents zoom on inputs with font-size < 16px */
    .cb-input,
    .cb-select,
    .cb-textarea       { font-size: 16px !important; padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); }
    .cb-field-error    { font-size: 0.74rem; }
    .char-counter      { font-size: 0.7rem; }
    .cb-checkbox-label { font-size: 0.8rem; }
    .cb-submit-btn     { font-size: 0.88rem !important; padding: 0.75rem !important; border-radius: var(--radius-md) !important; min-height: 50px; }
    .cb-alert          { padding: 0.875rem 1rem; font-size: 0.83rem; border-radius: var(--radius-md); }
    .cb-alert i        { font-size: 1.1rem; }

    /* Contact Info */
    .contact-info-card   { padding: 1.25rem; border-radius: var(--radius-lg); }
    .cic-title           { font-size: 1rem; }
    .cic-sub             { font-size: 0.82rem; margin-bottom: 1.25rem; }
    .cic-icon            { width: 36px; height: 36px; font-size: 0.9rem; border-radius: var(--radius-sm); }
    .cic-list li div a,
    .cic-list li div span { font-size: 0.83rem; }
    .cic-social-btn      { font-size: 0.76rem; padding: 0.3rem 0.75rem; }

    .why-contact-card    { padding: 1.25rem; border-radius: var(--radius-md); }
    .why-contact-card h5 { font-size: 0.9rem; }
    .wcc-list li         { font-size: 0.82rem; }

    .map-inner        { padding: 1.25rem; }
    .map-pin          { width: 40px; height: 40px; font-size: 1.1rem; }
    .map-label strong { font-size: 0.83rem; }
    .map-label span   { font-size: 0.74rem; }
    .map-grid         { grid-template-columns: repeat(12, 1fr); }

    /* Service Quick Cards */
    .service-quick-card      { padding: 1rem 0.5rem; border-radius: var(--radius-md); }
    .service-quick-card i    { font-size: 1.3rem; }
    .service-quick-card span { font-size: 0.72rem; }

    /* Contact FAQ */
    .contact-faq-card    { padding: 1.25rem; border-radius: var(--radius-md); }
    .cfc-icon            { width: 44px; height: 44px; font-size: 1.1rem; border-radius: var(--radius-md); }
    .contact-faq-card h5 { font-size: 0.9rem; }
    .contact-faq-card p  { font-size: 0.82rem; }

    /* ---- CTA ---- */
    .cta-box   { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); }
    .cta-title { font-size: 1.45rem; }
    .cta-sub   { font-size: 0.85rem; }
    .cta-orb-1 { width: 180px; height: 180px; }
    .cta-orb-2 { width: 160px; height: 160px; }

    /* ---- FOOTER ---- */
    .cb-footer          { padding: 40px 0 0; }
    .footer-brand-desc  { font-size: 0.83rem; }
    .footer-heading     { font-size: 0.78rem; margin-bottom: 1rem; }
    .footer-links li a  { font-size: 0.83rem; }
    .footer-contact-list li { font-size: 0.83rem; }
    .footer-social-btn  { width: 34px; height: 34px; font-size: 0.88rem; border-radius: 9px; }
    .footer-divider     { margin-top: 2.5rem; padding: 1.25rem 0; }
    .footer-copy        { font-size: 0.78rem; }
    .footer-bottom-links a { font-size: 0.78rem; }

    /* ---- SCROLL TOP ---- */
    .cb-scroll-top { width: 40px; height: 40px; font-size: 0.95rem; bottom: 15px; right: 15px; }

    /* ---- ABOUT ---- */
    .about-stat-grid        { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .about-stat-item strong { font-size: 1.4rem; }
    .about-stat-item span   { font-size: 0.72rem; }
    .team-card              { padding: 1.5rem; border-radius: var(--radius-lg); }
    .team-avatar            { width: 64px; height: 64px; font-size: 1.4rem; }
    .team-card h4           { font-size: 0.95rem; }
    .team-role              { font-size: 0.74rem; }
    .team-card p            { font-size: 0.82rem; }
    .value-card             { padding: 1.25rem; border-radius: var(--radius-md); }
    .vc-icon                { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 11px; }
    .value-card h4          { font-size: 0.92rem; }
    .value-card p           { font-size: 0.82rem; }

    /* ---- HOMEPAGE EXTRAS ---- */
    .service-home-card  { padding: 1.5rem; border-radius: var(--radius-lg); }
    .shc-icon           { width: 46px; height: 46px; font-size: 1.2rem; border-radius: 13px; }
    .shc-title          { font-size: 1rem; }
    .shc-desc           { font-size: 0.83rem; }
    .stat-card          { padding: 1.5rem 1.25rem; }
    .stat-icon          { width: 48px; height: 48px; font-size: 1.25rem; border-radius: 13px; }
    .stat-number        { font-size: 1.9rem; }
    .about-highlight-card { padding: 1.25rem; }
    .ahc-icon           { width: 38px; height: 38px; font-size: 1rem; border-radius: var(--radius-sm); }
}


/* ============================================================
   07. TOUCH DEVICES — Remove stuck hover states
   ============================================================ */
@media (hover: none) and (pointer: coarse) {

    .portfolio-full-card:hover,
    .saas-project-card:hover,
    .community-card:hover,
    .testimonial-card:hover,
    .service-home-card:hover,
    .service-detail-card:hover,
    .service-quick-card:hover,
    .contact-faq-card:hover,
    .why-process-card:hover,
    .why-contact-card:hover,
    .value-card:hover,
    .team-card:hover,
    .about-highlight-card:hover,
    .stat-card:hover,
    .tl-card:hover,
    .step-visual-card:hover,
    .wsc-item:hover,
    .cc-metric:hover,
    .pfc-result-item:hover,
    .gsg-item:hover         { transform: none; box-shadow: none; }

    .step-act-item:hover    { transform: none; background: rgba(255,255,255,0.03); }
    .footer-social-btn:hover { transform: none; }
    .cic-social-btn:hover   { transform: none; }
    .cb-scroll-top:hover    { transform: translateY(0); }
    .shc-icon:hover,
    .svc-icon:hover,
    .pfc-icon-wrap:hover,
    .wpc-icon:hover,
    .cc-platform-icon:hover,
    .vc-icon:hover,
    .ahc-icon:hover,
    .cfc-icon:hover          { transform: none; }

    /* Touch targets minimum 44px */
    .cb-btn-primary,
    .cb-btn-outline,
    .filter-btn,
    .cb-nav-cta              { min-height: 44px; }

    /* Tap highlight */
    .strip-item,
    .psi-item,
    .csi-item,
    .service-quick-card,
    .footer-social-btn       { -webkit-tap-highlight-color: rgba(108,99,255,0.15); }
}


/* ============================================================
   08. LANDSCAPE PHONES
   ============================================================ */
@media (max-width: 767.98px) and (orientation: landscape) {

    .cb-hero      { padding: 80px 0 50px; min-height: auto; }
    .cb-page-hero { padding: 90px 0 45px; min-height: auto; }
    .hero-title   { font-size: 1.75rem; }
    .hero-orb-1   { width: 300px; height: 300px; }
    .hero-orb-2   { width: 250px; height: 250px; }

    /* Mobile menu scrollable in landscape */
    #cbMobileMenu {
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(108,99,255,0.3) transparent;
    }

    .cta-box { padding: 1.5rem; }
}


/* ============================================================
   09. HIGH DPI / RETINA
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {

    .portfolio-full-card,
    .service-detail-card,
    .contact-form-wrap,
    .contact-info-card,
    .saas-project-card,
    .community-card,
    .step-visual-card { border-width: 0.5px; }
}


/* ============================================================
   10. CONTAINER MAX-WIDTH OVERRIDES
   ============================================================ */
@media (min-width: 1400px) {
    .container, .container-xxl { max-width: 1320px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container, .container-xl  { max-width: 1160px; }
}


/* ============================================================
   11. UTILITY CLASSES FOR MOBILE
   ============================================================ */
@media (max-width: 575.98px) {
    .text-xs-center  { text-align: center  !important; }
    .text-xs-start   { text-align: left    !important; }
    .d-xs-none       { display: none       !important; }
    .d-xs-block      { display: block      !important; }
    .d-xs-flex       { display: flex       !important; }
    .mb-xs-0         { margin-bottom: 0    !important; }
    .mb-xs-2         { margin-bottom: .5rem !important; }
    .mb-xs-3         { margin-bottom: 1rem  !important; }
    .mt-xs-3         { margin-top:    1rem  !important; }
    .mt-xs-4         { margin-top:    1.5rem !important; }
    .p-xs-0          { padding:       0     !important; }
    .w-xs-100        { width:         100%  !important; }
    .gap-xs-2        { gap:           .5rem !important; }
    .gap-xs-3        { gap:           1rem  !important; }
    .justify-xs-center { justify-content: center !important; }
}

@media (max-width: 767.98px) {
    .text-sm-center  { text-align: center !important; }
    .text-sm-start   { text-align: left   !important; }
    .d-sm-none       { display: none      !important; }
    .d-sm-block      { display: block     !important; }
    .w-sm-100        { width:     100%    !important; }
}


/* ============================================================
   12. SAFE AREA — iPhone X+ notch / home indicator
   ============================================================ */
@supports (padding: max(0px)) {

    #cbNavbar {
        padding-left:  max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .footer-divider {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .cb-scroll-top {
        bottom: max(15px, env(safe-area-inset-bottom));
        right:  max(15px, env(safe-area-inset-right));
    }

    /* Mobile menu safe area */
    #cbMobileMenu {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
        padding-left:   max(1rem, env(safe-area-inset-left));
        padding-right:  max(1rem, env(safe-area-inset-right));
    }
}


/* ============================================================
   13. REDUCED MOTION — Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }

    /* Hide loader entirely for reduced motion users */
    #page-loader { display: none !important; }

    /* No AOS animations */
    [data-aos] {
        opacity: 1             !important;
        transform: none        !important;
        transition: none       !important;
    }
}


/* ============================================================
   END OF RESPONSIVE.CSS — v2.0.0
   ============================================================ */