/*
|--------------------------------------------------------------------------
| VABCORE Typography Polish
|--------------------------------------------------------------------------
|
| This file improves the visual hierarchy, readability and responsive
| behaviour of existing text without replacing the core typography file.
|
*/

/*
|--------------------------------------------------------------------------
| Global Text Rendering
|--------------------------------------------------------------------------
*/

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

/*
|--------------------------------------------------------------------------
| Global Headings
|--------------------------------------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    text-wrap: balance;
}

h1 {
    font-size: clamp(3.25rem, 6.2vw, 6.6rem);
    line-height: 1.01;
}

h2 {
    font-size: clamp(2.35rem, 4.4vw, 4.25rem);
    line-height: 1.12;
}

h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1.3;
}

h4 {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.35;
}

/*
|--------------------------------------------------------------------------
| Paragraphs and Supporting Text
|--------------------------------------------------------------------------
*/

p {
    text-wrap: pretty;
}

.section p,
.hero-copy,
.home-about-content p,
.services-preview-summary p,
.development-process-summary p,
.products-preview-summary p,
.industries-summary p,
.portfolio-preview-summary p,
.clients-section-summary p,
.testimonials-summary p,
.latest-insights-summary p,
.faq-introduction > p,
.final-cta-content > p {
    line-height: 1.75;
}

/*
|--------------------------------------------------------------------------
| Hero Typography
|--------------------------------------------------------------------------
*/

.hero-content {
    min-width: 0;
}

.hero-content h1 {
    max-width: 770px;
    margin-bottom: 30px;
    color: var(--color-white);
    font-size: clamp(3.4rem, 6.1vw, 6.8rem);
    line-height: 1.01;
    letter-spacing: -0.055em;
}

.hero-content h1 span {
    display: block;
    color: var(--color-accent);
    background:
        linear-gradient(
            90deg,
            var(--color-accent),
            #9cecff
        );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-copy {
    max-width: 665px;
    margin-bottom: 34px;
    color: #c4d1e2;
    font-size: clamp(1.02rem, 1.45vw, 1.23rem);
    line-height: 1.75;
}

.hero-badge {
    font-family: var(--font-heading);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

.hero-tech span {
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
}

/*
|--------------------------------------------------------------------------
| Section Headings
|--------------------------------------------------------------------------
*/

.section-tag,
.final-cta-label,
.footer-newsletter-label {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-wider);
}

.home-about-content h2,
.services-preview-heading h2,
.why-choose-heading h2,
.statistics-heading h2,
.development-process-heading h2,
.products-preview-heading h2,
.industries-heading h2,
.portfolio-preview-heading h2,
.clients-section-heading h2,
.testimonials-heading h2,
.latest-insights-heading h2,
.faq-introduction h2,
.final-cta-content h2 {
    margin-bottom: 22px;
    font-size: clamp(2.35rem, 4.3vw, 4.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.home-about-content h2 span,
.services-preview-heading h2 span,
.why-choose-heading h2 span,
.statistics-heading h2 span,
.development-process-heading h2 span,
.products-preview-heading h2 span,
.industries-heading h2 span,
.portfolio-preview-heading h2 span,
.clients-section-heading h2 span,
.testimonials-heading h2 span,
.latest-insights-heading h2 span,
.faq-introduction h2 span,
.final-cta-content h2 span {
    letter-spacing: inherit;
}

/*
|--------------------------------------------------------------------------
| Section Summary Text
|--------------------------------------------------------------------------
*/

.services-preview-summary,
.development-process-summary,
.products-preview-summary,
.industries-summary,
.portfolio-preview-summary,
.clients-section-summary,
.testimonials-summary,
.latest-insights-summary {
    max-width: 620px;
}

.services-preview-summary p,
.development-process-summary p,
.products-preview-summary p,
.industries-summary p,
.portfolio-preview-summary p,
.clients-section-summary p,
.testimonials-summary p,
.latest-insights-summary p {
    font-size: clamp(0.96rem, 1.2vw, 1.08rem);
}

/*
|--------------------------------------------------------------------------
| About Section
|--------------------------------------------------------------------------
*/

.home-about-content > p:first-of-type {
    color: var(--color-heading);
    font-size: clamp(1.04rem, 1.35vw, 1.2rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.75;
}

.home-about-content > p:not(:first-of-type) {
    font-size: 0.98rem;
}

/*
|--------------------------------------------------------------------------
| Card Titles
|--------------------------------------------------------------------------
*/

.service-card h3,
.feature-card h3,
.stat-card h3,
.process-step h3,
.product-card h3,
.industry-card h3,
.project-card h3,
.client-card h3,
.blog-card h3,
.testimonial-client-details h3,
.faq-question-text {
    letter-spacing: -0.025em;
}

.service-card h3,
.feature-card h3,
.process-step h3,
.product-card h3,
.industry-card h3,
.project-card h3,
.client-card h3 {
    font-size: clamp(1.15rem, 1.55vw, 1.42rem);
}

.service-card p,
.feature-card p,
.process-step p,
.product-card p,
.industry-card p,
.project-card p,
.client-card p,
.blog-card p {
    line-height: 1.75;
}

/*
|--------------------------------------------------------------------------
| Statistics
|--------------------------------------------------------------------------
*/

.stat-card strong,
.client-trust-metric strong {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.045em;
}

.stat-card strong {
    font-size: clamp(2.6rem, 4vw, 4.2rem);
    line-height: 1;
}

/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.nav-menu a,
.nav-cta {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

.brand-text strong {
    letter-spacing: 0.01em;
}

.brand-text small {
    letter-spacing: 0.11em;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn {
    letter-spacing: -0.01em;
}

.btn,
.project-card-link,
.product-card-link,
.industry-card-link,
.client-card-link,
.blog-card-link,
.footer-contact-button,
.footer-project-strip > a {
    font-family: var(--font-heading);
}

/*
|--------------------------------------------------------------------------
| Labels, Badges and Categories
|--------------------------------------------------------------------------
*/

.product-card-category,
.project-card-category,
.client-industry,
.blog-card-category,
.blog-card-status,
.project-status,
.client-status,
.product-card-status {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-wide);
}

/*
|--------------------------------------------------------------------------
| Code Window Typography
|--------------------------------------------------------------------------
*/

.code-content {
    font-family: var(--font-monospace);
    font-size: clamp(0.78rem, 1.05vw, 0.94rem);
    line-height: 1.85;
    letter-spacing: 0;
}

/*
|--------------------------------------------------------------------------
| Footer Typography
|--------------------------------------------------------------------------
*/

.footer-company-description {
    line-height: 1.75;
}

.footer-column h3 {
    letter-spacing: -0.015em;
}

.footer-column a,
.footer-contact-list a,
.footer-contact-list strong {
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Long Word and URL Protection
|--------------------------------------------------------------------------
*/

.hero-content,
.section,
.card,
.service-card,
.feature-card,
.process-step,
.product-card,
.industry-card,
.project-card,
.client-card,
.blog-card,
.testimonial-card,
.faq-item,
.site-footer {
    overflow-wrap: break-word;
    word-break: normal;
}

a,
strong,
span,
p,
h1,
h2,
h3,
h4 {
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| Medium Desktop and Small Laptop Refinement
|--------------------------------------------------------------------------
*/

@media (max-width: 1280px) {
    .hero-content h1 {
        max-width: 680px;
        font-size: clamp(3.3rem, 6vw, 5.6rem);
    }

    .hero-copy {
        max-width: 610px;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet Typography
|--------------------------------------------------------------------------
*/

@media (max-width: 860px) {
    h1 {
        font-size: clamp(2.8rem, 8vw, 4.5rem);
    }

    h2 {
        font-size: clamp(2.15rem, 6.5vw, 3.55rem);
    }

    .hero-content h1 {
        max-width: 820px;
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(2.9rem, 7.8vw, 4.8rem);
        line-height: 1.08;
        letter-spacing: -0.045em;
    }

    .hero-copy {
        max-width: 760px;
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(1rem, 2.3vw, 1.14rem);
    }

    .home-about-content h2,
    .services-preview-heading h2,
    .why-choose-heading h2,
    .statistics-heading h2,
    .development-process-heading h2,
    .products-preview-heading h2,
    .industries-heading h2,
    .portfolio-preview-heading h2,
    .clients-section-heading h2,
    .testimonials-heading h2,
    .latest-insights-heading h2,
    .faq-introduction h2,
    .final-cta-content h2 {
        font-size: clamp(2.15rem, 6.4vw, 3.55rem);
    }
}

/*
|--------------------------------------------------------------------------
| Mobile Typography
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {
    body {
        font-size: 0.96rem;
    }

    .hero-content h1 {
        max-width: 560px;
        margin-bottom: 25px;
        font-size: clamp(2.5rem, 10.2vw, 3.8rem);
        line-height: 1.08;
        letter-spacing: -0.042em;
    }

    .hero-copy {
        margin-bottom: 29px;
        font-size: clamp(0.98rem, 4.3vw, 1.08rem);
        line-height: 1.7;
    }

    .hero-badge {
        font-size: 0.72rem;
    }

    .home-about-content h2,
    .services-preview-heading h2,
    .why-choose-heading h2,
    .statistics-heading h2,
    .development-process-heading h2,
    .products-preview-heading h2,
    .industries-heading h2,
    .portfolio-preview-heading h2,
    .clients-section-heading h2,
    .testimonials-heading h2,
    .latest-insights-heading h2,
    .faq-introduction h2,
    .final-cta-content h2 {
        margin-bottom: 18px;
        font-size: clamp(2rem, 8.5vw, 3rem);
        line-height: 1.15;
        letter-spacing: -0.035em;
    }

    .service-card h3,
    .feature-card h3,
    .process-step h3,
    .product-card h3,
    .industry-card h3,
    .project-card h3,
    .client-card h3 {
        font-size: 1.18rem;
    }

    .code-content {
        font-size: 0.76rem;
        line-height: 1.75;
    }
}

/*
|--------------------------------------------------------------------------
| Small Mobile Typography
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {
    .hero-content h1 {
        font-size: clamp(2.25rem, 11vw, 3rem);
        line-height: 1.1;
    }

    .hero-copy {
        font-size: 0.96rem;
    }

    .hero-badge {
        font-size: 0.67rem;
        line-height: 1.4;
    }

    .home-about-content h2,
    .services-preview-heading h2,
    .why-choose-heading h2,
    .statistics-heading h2,
    .development-process-heading h2,
    .products-preview-heading h2,
    .industries-heading h2,
    .portfolio-preview-heading h2,
    .clients-section-heading h2,
    .testimonials-heading h2,
    .latest-insights-heading h2,
    .faq-introduction h2,
    .final-cta-content h2 {
        font-size: clamp(1.85rem, 9.4vw, 2.65rem);
    }

    .section-tag {
        font-size: 0.66rem;
        letter-spacing: 0.06em;
    }

    .nav-menu a {
        font-size: 0.94rem;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced Motion Compatibility
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}