/* ═══════════════════════════════════════════════════
   RESPONSIVE.CSS — Full Mobile Responsive Overrides
   CRYSTALINK Premium Website — v3
   ═══════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET (max-width: 1024px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
    /* Hero */
    .hero__content {
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }

    .hero__headline {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
    }

    /* Services — horizontal scroll */
    .services__track-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--cyan-rgb), 0.2) transparent;
        padding-bottom: 1rem;
    }

    .services__track-wrapper::-webkit-scrollbar {
        height: 4px;
    }
    .services__track-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    .services__track-wrapper::-webkit-scrollbar-thumb {
        background: rgba(var(--cyan-rgb), 0.2);
        border-radius: 999px;
    }

    .service-panel {
        width: 300px;
        min-height: 380px;
    }

    /* Pricing */
    .pricing__tab-panels {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .pricing__retainer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pricing__package-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Process */
    .process__step {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .process__connector {
        display: none;
    }

    .process__step--left .process__step-content,
    .process__step--right .process__step-content {
        grid-column: 1;
        text-align: left;
    }

    .process__step--left .process__step-dot,
    .process__step--right .process__step-dot {
        grid-column: 1;
        grid-row: 1;
    }

    .process__step-desc {
        max-width: 100%;
    }

    /* Founder */
    .founder__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE (max-width: 768px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {

    /* ── Hero ──────────────────────────────────── */
    .hero {
        min-height: 100svh;
        padding-top: calc(var(--nav-height) + 2rem);
    }

    .hero__content {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .hero__label {
        justify-content: center;
    }

    .hero__headline {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
        text-align: center;
    }

    .hero__sub {
        text-align: center;
        font-size: var(--text-body);
        max-width: 90%;
    }

    .hero__actions {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
        align-items: center;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .hero__scroll-indicator {
        bottom: 1.5rem;
    }

    .hero__crystals {
        opacity: 0.3;
    }


    /* ── Story ─────────────────────────────────── */
    .story {
        padding: var(--space-xl) 0;
    }

    .story__wrapper {
        padding: 0 var(--container-pad);
    }

    .story__text--large {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    .story__text--medium {
        font-size: clamp(1rem, 3.5vw, 1.4rem);
    }


    /* ── Services ──────────────────────────────── */
    .services {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-lg);
    }

    .services__header {
        padding: 0 var(--container-pad);
    }

    .services__title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    /* Stack cards vertically on mobile */
    .services__track-wrapper {
        overflow-x: visible;
        overflow-y: visible;
    }

    .services__track {
        flex-direction: column;
        gap: 1rem;
        padding: 0 var(--container-pad);
    }

    .service-panel {
        width: 100%;
        min-height: auto;
        padding: 1.8rem 1.5rem;
        flex-shrink: 1;
    }

    .service-panel__icon {
        width: 42px;
        height: 42px;
        padding: 8px;
        margin-bottom: 1.5rem;
    }

    .service-panel__number {
        margin-bottom: 1rem;
    }

    .service-panel__title {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        margin-bottom: 0.8rem;
    }

    .service-panel__desc {
        font-size: 0.85rem;
        line-height: 1.6;
    }


    /* ── Pricing ───────────────────────────────── */
    .pricing {
        padding: var(--space-xl) 0;
    }

    .pricing__header {
        padding: 0 var(--container-pad);
    }

    .pricing__title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .pricing__onetime,
    .pricing__retainers,
    .pricing__packages {
        padding: 0 var(--container-pad);
    }

    .pricing__category-title {
        font-size: clamp(1rem, 3.5vw, 1.3rem);
    }

    /* Tab navigation: horizontal scroll */
    .pricing__tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap;
    }

    .pricing__tab-nav::-webkit-scrollbar {
        display: none;
    }

    .pricing__tab-btn {
        white-space: nowrap;
        font-size: 0.72rem;
        padding: 0.6rem 1rem;
        flex-shrink: 0;
    }

    /* Pricing tiers stack vertically */
    .pricing__tab-panel {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pricing__tier {
        padding: 1.8rem 1.5rem;
    }

    .pricing__tier-price {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    /* Retainer cards */
    .pricing__retainer-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pricing__retainer-card {
        padding: 1.8rem 1.5rem;
    }

    .pricing__retainer-tiers {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .pricing__retainer-tier {
        padding: 1rem;
    }

    /* Package cards */
    .pricing__package-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pricing__package {
        padding: 2rem 1.5rem;
    }

    .pricing__package-price {
        font-size: clamp(2rem, 7vw, 2.8rem);
    }

    .pricing__terms {
        padding: 0 var(--container-pad);
        font-size: 0.75rem;
    }


    /* ── Process ───────────────────────────────── */
    .process {
        padding: var(--space-xl) 0;
    }

    .process__header {
        padding: 0 var(--container-pad);
    }

    .process__title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .process__timeline {
        padding: 0 var(--container-pad);
    }

    .process__connector {
        display: none;
    }

    .process__step {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-bottom: var(--space-lg);
    }

    .process__step--left .process__step-content,
    .process__step--right .process__step-content {
        grid-column: 1;
        text-align: left;
    }

    .process__step--left .process__step-dot,
    .process__step--right .process__step-dot {
        display: none;
    }

    .process__step-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    .process__step-desc {
        max-width: 100%;
        font-size: 0.85rem;
    }

    .process__step-number {
        font-size: 0.7rem;
    }


    /* ── Founder ───────────────────────────────── */
    .founder {
        padding: var(--space-xl) 0;
    }

    .founder__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 var(--container-pad);
    }

    .founder__headline {
        font-size: clamp(2rem, 7vw, 3rem);
    }

    .founder__name {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    .founder__detail {
        font-size: 0.85rem;
    }

    .founder__detail svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }


    /* ── CTA ───────────────────────────────────── */
    .cta {
        min-height: 80vh;
        padding: var(--space-xl) var(--container-pad);
    }

    .cta__headline {
        font-size: clamp(1.8rem, 7vw, 3rem);
        text-align: center;
    }

    .cta__sub {
        text-align: center;
        font-size: 0.9rem;
    }

    .cta__content {
        text-align: center;
        align-items: center;
    }

    .cta__actions {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .cta__actions .btn {
        width: 100%;
    }


    /* ── Footer ────────────────────────────────── */
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMALL MOBILE (max-width: 480px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
    .hero__headline {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .hero__sub {
        font-size: 0.85rem;
    }

    .service-panel {
        padding: 1.5rem 1.2rem;
    }

    .service-panel__title {
        font-size: 1.05rem;
    }

    .pricing__tab-btn {
        font-size: 0.65rem;
        padding: 0.5rem 0.8rem;
    }

    .pricing__tier {
        padding: 1.5rem 1.2rem;
    }

    .pricing__tier-price {
        font-size: 1.6rem;
    }

    .footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer__brand {
        grid-column: 1;
    }

    .cta__headline {
        font-size: clamp(1.5rem, 8vw, 2.2rem);
    }

    .founder__headline {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .process__step-title {
        font-size: 1.3rem;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   iOS SAFE AREA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer__bottom {
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    }

    .mobile-menu__footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE FEATURED CARD SCALE FIX
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .pricing__tier--featured {
        transform: none;
    }

    .pricing__tier--featured:hover {
        transform: translateY(-4px);
    }

    .pricing__package--featured {
        transform: none;
    }

    .pricing__package--featured:hover {
        transform: translateY(-4px);
    }

    /* Disable pseudo-element effects on mobile for performance */
    .pricing__tier::after,
    .pricing__tier--featured::before,
    .pricing__package--featured::before {
        display: none;
    }
}