/* ==========================================================================
   ByteRoots — Phase 2 Premium Polish Layer
   Non-destructive overrides loaded AFTER style.css + responsive.css.
   Goal: minimal, premium, spacious, calm, highly readable.
   Remove this <link> to fully revert. Scoped under .main-page where possible.
   ========================================================================== */

:root {
    --br-ink: #1C1C1C;
    --br-muted: #4a4f57;
    --br-space: clamp(72px, 9vw, 130px); /* consistent section rhythm */
}

/* ---------- 1. Typography hierarchy ---------- */

/* Fluid, premium display headings — scale smoothly, never clip descenders */
.main-page .section-title {
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.06;
    letter-spacing: -0.5px;
}

/* Eyebrow: a touch more refinement + breathing room under it */
.main-page .section-subtitle {
    letter-spacing: 4px;
    margin-bottom: 14px;
}

/* Calmer, more readable body copy */
.main-page p {
    color: var(--br-muted);
    line-height: 1.65;
}

/* Keep intro paragraphs at a comfortable reading measure (not full-bleed wide) */
.main-page .section-title + p,
.main-page .case-studio-header p,
.main-page .how-we-do-left-content p {
    max-width: 56ch;
}

/* Hero subhead: refined leading + measure */
.main-page .hero-empowerment-area .hero-empowerment-left-content p {
    line-height: 1.45;
    max-width: 30ch;
}

/* ---------- 2. Spacing rhythm for new / centered section headers ---------- */

.main-page .case-studio-header {
    margin-bottom: 56px;
}

.main-page .case-studio-header p {
    margin: 18px auto 0;
}

/* ---------- 3. Buttons — premium, calm interaction ---------- */

.main-page .theme-btn,
.main-page .theme-btn2 {
    font-weight: 500;
    padding: 15px 32px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    will-change: transform;
}

.main-page .theme-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(91, 192, 235, 0.28);
}

.main-page .theme-btn2:hover {
    transform: translateY(-2px);
    background: rgba(91, 192, 235, 0.16);
}

/* ---------- 4. Subtle, tasteful motion on cards ---------- */
/* IMPORTANT: only static content cards. Do NOT add transform transitions to
   .simple-shadow / .client-logo — the tech marquee logos and hero floating
   boxes are animated by GSAP/keyframes, and a CSS transition fights their
   per-frame transforms (causes stutter behind the cards). */

.main-page .service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-page .service-card:hover {
    transform: translateY(-4px);
}

/* ---------- 5. Global niceties ---------- */

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(91, 192, 235, 0.25);
    color: var(--br-ink);
}

/* Accessible focus ring (keyboard only) */
.main-page a:focus-visible,
.main-page button:focus-visible,
.main-page input:focus-visible,
.main-page textarea:focus-visible {
    outline: 2px solid var(--primary_color);
    outline-offset: 3px;
}

/* Images render a touch softer/rounded where they sit in cards */
.main-page .service-card img {
    image-rendering: auto;
}

/* ---------- 6. Container width (premium, less sprawling) ---------- */
/* Default theme container is 1550px — quite wide on large screens. This gently
   tightens it for a more premium, readable feel. NEEDS A VISUAL CHECK across
   pages (heroes, marquees, background shapes). To revert, delete this one rule. */
.custom-container {
    max-width: 1440px;
}

/* ---------- 7. Mobile: stack hero CTAs full-width ---------- */
@media (max-width: 575px) {
    .main-page .hero-empowerment-area .btns-group {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .main-page .hero-empowerment-area .btns-group .theme-btn,
    .main-page .hero-empowerment-area .btns-group .theme-btn2 {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- 8. Mobile: tighten section spacing site-wide ---------- */
/* Theme sections use ~95–185px vertical padding; far too much on phones.
   !important is required because responsive.css uses higher-specificity rules
   like `.homepage .service-area` / `.service-page .service-area`. Targets
   <section> elements only, so the header/footer are untouched. */
@media (max-width: 767px) {
    .main-page section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    /* hero: header already provides space above; its row adds a big gap below */
    .main-page .hero-empowerment-area {
        padding-top: 36px !important;
    }
    .main-page .hero-empowerment-area .custom-row {
        padding-bottom: 32px !important;
        gap: 36px !important;
    }
    /* centered section headers (e.g. Technology) — smaller gap under the title */
    .main-page .case-studio-header {
        margin-bottom: 32px !important;
    }
    /* logo/tech marquee — keep it a bit tighter to its heading */
    .main-page .client-area {
        padding-top: 24px !important;
        padding-bottom: 40px !important;
    }
}