/* Pyramidsoft Typography & Spacing System
 * Display hierarchy uses compact, high-contrast proportions.
 * Headings & Display: Outfit (700 Bold / 800 Extra Bold)
 * Body & Content: Outfit (500 Medium / 600 SemiBold / 700 Bold)
 */

:root {
    /* Fonts */
    --font-heading: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-primary: var(--font-heading);

    /* Scale baseline aligned with bikinwebsite.pro computed styles */
    --text-hero: clamp(34px, 4.2vw, 52px);
    --text-section: clamp(32px, 3.6vw, 46px);
    --text-pricing-heading: clamp(34px, 4.2vw, 54px);
    --text-contact-heading: clamp(30px, 3.8vw, 48px);
    --text-card-featured: 26px;
    --text-card: 21px;
    --text-card-compact: 17.5px;
    --text-hero-description: clamp(16.5px, 1.4vw, 18.5px);
    --text-section-description: 17px;
    --text-body: 16px;
    --text-body-sm: 14px;
    --text-card-description: 14.5px;
    --text-small: 13px;
    --text-micro: 11.5px;
    --text-eyebrow: 12.5px;
    --text-navigation: 15px;
    --text-button: 15.5px;
    --text-faq-question: 17px;
    --text-faq-answer: 15px;
    --text-price: 42px;
    --text-footer-heading: 13px;
    --text-footer-body: 14.5px;

    /* Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* Leading (compact headlines, comfortable body - bikinwebsite.pro style) */
    --leading-hero: 1.22;
    --leading-display: 1.1;
    --leading-display-tight: 1.06;
    --leading-mobile-display: 1.15;
    --leading-card: 1.2;
    --leading-body: 1.6;
    --leading-relaxed: 1.7;
    --leading-snug: 1.35;

    /* Letter Spacing */
    --tracking-hero: -0.015em;
    --tracking-display: -0.01em;
    --tracking-pricing: -0.025em;
    --tracking-contact: -0.03em;
    --tracking-card: -0.01em;
    --tracking-label: 0.08em;
    --tracking-footer-label: 0.14em;

    /* Layout & Line Bounds */
    --content-max: 1200px;
    --nav-max: 1180px;
    --hero-title-max: 860px;
    --hero-description-max: 680px;
    --section-header-max: 720px;
    --prose-max: 680px;
    --section-space: 96px;
    --section-space-compact: 72px;
    --container-gutter: 24px;

    /* Compatibility aliases */
    --text-lead: var(--text-hero-description);
    --text-card-desc: var(--text-card-description);
    --text-section-desc: var(--text-section-description);
    --text-badge: var(--text-micro);
    --text-nav: var(--text-navigation);
    --text-btn: var(--text-button);
    --text-faq-q: var(--text-faq-question);
    --text-faq-a: var(--text-faq-answer);
    --text-price-main: var(--text-price);
    --max-hero-title: var(--hero-title-max);
    --max-hero-desc: var(--hero-description-max);
    --max-section-title: var(--section-header-max);
    --max-section-desc: var(--section-header-max);
    --max-body-para: var(--prose-max);
    --max-prose: var(--prose-max);
    --leading-section: var(--leading-display);
    --tracking-section: var(--tracking-display);
    --tracking-eyebrow: var(--tracking-label);
    --tracking-badge: 0.04em;
    --tracking-btn: 0;
}

html {
    text-size-adjust: 100%;
}

body {
    color: #334155;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: #0f172a;
    font-family: var(--font-heading);
}

/* ==================================================
   SEMANTIC HEADLINE & DISPLAY CLASSES
   ================================================== */

.hero-title,
.typo-hero,
.hero-heading {
    max-width: var(--hero-title-max);
    margin-inline: auto;
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-hero);
    color: #0f172a;
    text-align: center;
}

.hero-description,
.typo-hero-desc,
.hero-subheadline {
    max-width: var(--hero-description-max);
    margin-inline: auto;
    font-family: var(--font-body);
    font-size: var(--text-hero-description);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
    color: #475569;
    text-align: center;
}

.section-header {
    max-width: var(--section-header-max);
    margin-inline: auto;
    text-align: center;
}

.section-eyebrow,
.section-label,
.typo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.section-title,
.typo-section {
    max-width: var(--section-header-max);
    margin-inline: auto;
    font-family: var(--font-heading);
    font-size: var(--text-section);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: #0f172a;
}

.pricing-title {
    max-width: var(--section-header-max);
    margin-inline: auto;
    font-family: var(--font-heading);
    font-size: var(--text-pricing-heading);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-display-tight);
    letter-spacing: var(--tracking-pricing);
}

.contact-title {
    max-width: var(--section-header-max);
    margin-inline: auto;
    font-family: var(--font-heading);
    font-size: var(--text-contact-heading);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-contact);
}

.section-description,
.typo-section-desc {
    max-width: var(--section-header-max);
    margin-inline: auto;
    font-family: var(--font-body);
    font-size: var(--text-section-description);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
    color: #475569;
}

.card-title,
.typo-card {
    font-family: var(--font-heading);
    font-size: var(--text-card);
    font-weight: var(--weight-bold);
    line-height: var(--leading-card);
    letter-spacing: var(--tracking-card);
    color: #0f172a;
}

.card-title--featured { font-size: var(--text-card-featured); font-weight: var(--weight-extrabold); }
.card-title--compact { font-size: var(--text-card-compact); }

.card-description,
.typo-card-desc {
    font-family: var(--font-body);
    font-size: var(--text-card-description);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
    color: #475569;
}

/* ==================================================
   ACCENT & HIGHLIGHT HELPERS
   ================================================== */

.text-accent,
.text-blue {
    color: #2563eb;
}

.text-accent-gradient {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==================================================
   SUPPORTING ATOMS: BADGE, BUTTON, FAQ, PRICING
   ================================================== */

.micro-label,
.typo-badge {
    font-family: var(--font-heading);
    font-size: var(--text-micro);
    font-weight: var(--weight-bold);
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.button-label,
.btn-typography,
.typo-btn,
.btn-cta {
    font-family: var(--font-heading);
    font-size: var(--text-button);
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.faq-question,
.typo-faq-q {
    font-family: var(--font-heading);
    font-size: var(--text-faq-question);
    font-weight: var(--weight-bold);
    line-height: 1.35;
}

.faq-answer,
.typo-faq-a {
    font-family: var(--font-body);
    font-size: var(--text-faq-answer);
    font-weight: var(--weight-medium);
    line-height: 1.65;
    color: #475569;
}

.price-value,
.typo-price-main {
    font-family: var(--font-heading);
    font-size: var(--text-price);
    font-weight: var(--weight-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.footer-heading,
.typo-footer-heading {
    font-family: var(--font-heading);
    font-size: var(--text-footer-heading);
    font-weight: var(--weight-bold);
    line-height: 1.4;
    letter-spacing: var(--tracking-footer-label);
    text-transform: uppercase;
}

.footer-copy,
.typo-footer-body {
    font-family: var(--font-body);
    font-size: var(--text-footer-body);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
}

.prose-copy {
    max-width: var(--prose-max);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
}

.home-hero .stat-counter {
    font-family: var(--font-heading);
    font-size: clamp(28px, 2.4vw, 34px);
    font-weight: var(--weight-extrabold);
    line-height: 1.15;
}

.form-label {
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.form-control {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

.form-message {
    font-family: var(--font-body);
    font-size: var(--text-small);
    line-height: 1.5;
}

.section-spacing { padding-block: var(--section-space); }
.section-spacing-compact { padding-block: var(--section-space-compact); }

.content-container {
    width: min(100% - (var(--container-gutter) * 2), var(--content-max));
    margin-inline: auto;
}

/* ==================================================
   RESPONSIVE MEDIA QUERIES (TABLET & MOBILE)
   ================================================== */

@media (max-width: 980px) {
    :root {
        --section-space: 72px;
        --section-space-compact: 64px;
        --text-hero: clamp(30px, 3.8vw, 42px);
        --text-section: clamp(28px, 3.4vw, 38px);
        --text-pricing-heading: var(--text-hero);
    }
    .home-hero .stat-counter { font-size: 26px; }
}

@media (max-width: 767px) {
    :root {
        --text-hero: clamp(28px, 7.5vw, 34px);
        --text-section: clamp(26px, 6.5vw, 30px);
        --text-pricing-heading: clamp(28px, 7vw, 34px);
        --text-contact-heading: 26px;
        --text-card-featured: 20px;
        --text-card: 17px;
        --text-card-compact: 15.5px;
        --text-hero-description: 15px;
        --text-section-description: 15px;
        --text-body: 15px;
        --text-body-sm: 13.5px;
        --text-card-description: 13.5px;
        --text-small: 12.5px;
        --text-button: 15px;
        --text-eyebrow: 11px;
        --text-faq-question: 16px;
        --text-faq-answer: 14.5px;
        --text-price: 36px;
        --section-space: 56px;
        --section-space-compact: 48px;
        --container-gutter: 16px;
    }

    .hero-title,
    .typo-hero,
    .hero-heading {
        line-height: var(--leading-mobile-display);
    }

    .home-hero .stat-counter {
        font-size: 22px;
    }
}

@media (max-width: 380px) {
    :root {
        --text-hero: 26px;
        --text-section: 24px;
        --text-button: 14.5px;
    }

    .home-hero .stat-counter {
        font-size: 21px;
    }
}