/* =================================================================
   PCLab Core — Widget & Component Styles
   All widget-specific CSS lives here, loaded by the plugin.
   Depends on theme.css for design tokens (CSS custom properties).
   ================================================================= */

/* ===== HERO ===== */
.hero {
    padding: calc(var(--header-h) + var(--s-48)) 0 var(--s-64);
    background: var(--color-surface);
    position: relative;
}

@media (min-width: 768px) {
    .hero { padding: calc(var(--header-h) + var(--s-80)) 0 var(--s-96); }
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
    padding: 5px 14px 5px 5px;
    background: var(--sys-fill);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-full);
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sys-label-secondary);
    margin-bottom: var(--s-24);
}

.hero__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sys-label);
    display: inline-block;
    margin-left: 4px;
}

.hero__title {
    margin-bottom: var(--s-20);
    max-width: 600px;
}

.hero__subtitle {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    max-width: 480px;
    margin-bottom: var(--s-32);
}

.hero__actions {
    display: flex;
    gap: var(--s-12);
    flex-wrap: wrap;
    margin-bottom: var(--s-48);
}

/* Stats row */
.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-12);
    max-width: 480px;
}

@media (min-width: 768px) {
    .hero__stats { gap: var(--s-16); }
}

.hero__stat {
    padding: var(--s-20) var(--s-16);
    background: var(--sys-bg);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-lg);
    text-align: center;
}

.hero__stat-num {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    color: var(--sys-label);
    line-height: var(--lh-heading);
}

.hero__stat-label {
    font-size: var(--fs-xxs);
    color: var(--sys-label-secondary);
    margin-top: var(--s-4);
    letter-spacing: var(--ls-body);
    text-transform: none;
}

/* Desktop: two-column hero */
@media (min-width: 992px) {
    .hero__inner {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: var(--s-64);
        align-items: center;
    }

    .hero__stats {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .hero__stat {
        text-align: left;
        padding: var(--s-20) var(--s-24);
        display: flex;
        align-items: center;
        gap: var(--s-16);
    }

    .hero__stat-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--r-sm);
        background: var(--sys-label);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: var(--fs-body);
        flex-shrink: 0;
    }

    .hero__stat-num {
        font-size: var(--fs-h3);
    }
}

/* ===== BUTTONS ===== */
/* Base .btn → theme.css */

.btn--dark {
    background: var(--sys-label);
    color: #fff;
}

.btn--dark:hover {
    background: var(--sys-label);
    color: #fff;
    opacity: 1;
}

.btn--outline {
    background: transparent;
    color: var(--sys-label);
    border: 1.5px solid var(--sys-separator-opaque);
}

.btn--outline:hover {
    border-color: var(--sys-label);
    opacity: 1;
}

.btn--ghost {
    background: transparent;
    color: var(--sys-label);
    padding: 8px 4px;
    font-weight: 500;
}

.btn--ghost:hover { opacity: 0.6; }

/* Apple-style blue accent */
.btn--blue {
    background: var(--sys-blue);
    color: #fff;
}

.btn--blue:hover {
    background: var(--sys-blue);
    color: #fff;
    opacity: 1;
}

/* Outline on dark background (Apple "Buy" style) */
.btn--outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn--outline-light:hover {
    border-color: #fff;
    color: #fff;
    opacity: 1;
}

/* Outline blue (Apple "Shop iPhone" style) */
.btn--outline-blue {
    background: transparent;
    color: var(--sys-blue);
    border: 1.5px solid var(--sys-blue);
}

.btn--outline-blue:hover {
    background: var(--sys-blue);
    color: #fff;
    opacity: 1;
}

/* White filled on dark (Apple "Stream now" style) */
.btn--white {
    background: var(--color-surface);
    color: var(--sys-label);
}

.btn--white:hover {
    background: var(--sys-fill);
    color: var(--sys-label);
    opacity: 1;
}

.btn--sm { padding: 8px 20px; font-size: var(--fs-xs); }
.btn--lg { padding: 15px 36px; font-size: var(--fs-body); }
.btn--full { width: 100%; }

/* ===== APPLE-STYLE HERO (full bg image) ===== */
.hero-visual {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: var(--sys-label);
    color: #fff;
}

.hero-visual__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-visual__bg picture {
    width: 100%;
    height: 100%;
}

.hero-visual__bg img,
.hero-visual__bg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* default, overridden by widget control */
    object-position: center; /* default, overridden by widget control */
    opacity: 0.55;           /* default, overridden by widget control */
}

/* Beat WP core: img[width][height]{height:auto;aspect-ratio:…} (specificity 0-2-1)
   This selector = class + 2 attrs + element = (0-3-1) → wins */
.hero-visual__bg img[width][height] {
    height: 100%;
    aspect-ratio: auto;
}

.hero-visual__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.35) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.5) 100%
    );
    z-index: 1;
}

.hero-visual__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: var(--s-32) var(--gutter);
}

.hero-visual__title {
    font-size: var(--fs-hero);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-display);
    color: #fff;
    margin-bottom: var(--s-16);
}

.hero-visual__lead {
    font-size: var(--fs-h4);
    color: rgba(255,255,255,0.75);
    line-height: var(--lh-body);
    max-width: 520px;
    margin: 0 auto var(--s-32);
}

.hero-visual__actions {
    display: flex;
    justify-content: center;
    gap: var(--s-12);
    flex-wrap: wrap;
}

.hero-visual__scroll {
    position: absolute;
    bottom: var(--s-32);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.4);
    font-size: var(--fs-h2);
    animation: hero-bounce 2s ease infinite;
}

@keyframes hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ===== CLIENTS / PORTFOLIO SECTION ===== */
.clients {
    padding: var(--s-48) 0;
    background: var(--color-surface);
    border: 0.5px solid var(--sys-separator-opaque);
}

.clients__label {
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sys-label-secondary);
    text-align: center;
    margin-bottom: var(--s-32);
}

.clients__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-32);
}

@media (min-width: 768px) {
    .clients__grid { gap: var(--s-48); }
}

.clients__logo {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    color: var(--sys-label-secondary);
    transition: color var(--duration) var(--ease);
    white-space: nowrap;
}

/* When output-buffer wraps client img in <picture> */
.clients__logo picture {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.clients__logo:hover {
    color: var(--sys-label-secondary);
    opacity: 1;
}

.clients__logo i {
    font-size: var(--fs-h2);
}

/* Logo mark (for clients without icons) */
.clients__mark {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--sys-separator-opaque);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xxs);
    font-weight: 700;
    color: var(--sys-label-secondary);
    letter-spacing: var(--ls-body);
}

/* ===== CTA FORM SECTION ===== */
.cta-form {
    padding: var(--s-80) 0;
    background: var(--sys-label);
    color: #fff;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .cta-form { padding: var(--s-120) 0; }
}

.cta-form__inner {
    display: grid;
    gap: var(--s-48);
    align-items: center;
}

@media (min-width: 768px) {
    .cta-form__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-64);
    }
}

.cta-form__label {
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sys-label-secondary);
    margin-bottom: var(--s-12);
}

.cta-form__title {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    color: #fff;
    margin-bottom: var(--s-16);
}

.cta-form__desc {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    margin-bottom: var(--s-24);
}

.cta-form__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cta-form__features li {
    display: flex;
    align-items: center;
    gap: var(--s-12);
    padding: var(--s-8) 0;
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
}

.cta-form__features li i {
    color: var(--sys-blue);
    font-size: var(--fs-sm);
}

/* Form card */
.cta-form__card {
    background: rgba(255,255,255,0.06);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    padding: var(--s-32);
}

@media (min-width: 768px) {
    .cta-form__card { padding: var(--s-40); }
}

.cta-form__card-title {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--s-24);
}

.form-group {
    margin-bottom: var(--s-16);
}

.form-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--sys-label-secondary);
    margin-bottom: var(--s-4);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font);
    font-size: var(--fs-sm);
    background: rgba(255,255,255,0.06);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: var(--r-sm);
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--duration), background var(--duration);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255,255,255,0.25);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--sys-blue);
    background: rgba(255,255,255,0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2386868B' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-select option {
    background: var(--sys-label);
    color: #fff;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
}

@media (max-width: 575px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-note {
    font-size: var(--fs-xs);
    color: var(--sys-label-secondary);
    margin-top: var(--s-16);
    display: flex;
    align-items: center;
    gap: var(--s-8);
}

/* ===== STATS IMPACT SECTION ===== */
.stats-impact {
    padding: var(--s-64) 0;
    background: var(--sys-bg);
    border: 0.5px solid var(--sys-separator-opaque);
    border: 0.5px solid var(--sys-separator-opaque);
}

@media (min-width: 768px) {
    .stats-impact { padding: var(--s-80) 0; }
}

.stats-impact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-16);
}

@media (min-width: 768px) {
    .stats-impact__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-20);
    }
}

.stats-impact__card {
    position: relative;
    padding: var(--s-32) var(--s-24);
    border-radius: var(--radius-xl);
    text-align: center;
    overflow: hidden;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.stats-impact__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

@media (hover: none) {
    .stats-impact__card:hover { transform: none; box-shadow: none; }
}

@media (min-width: 768px) {
    .stats-impact__card { padding: var(--s-40) var(--s-32); }
}

/* Card variants */
.stats-impact__card--blue {
    background: var(--sys-blue);
    color: #fff;
}

.stats-impact__card--dark {
    background: var(--sys-label);
    color: #fff;
}

.stats-impact__card--gradient {
    background: linear-gradient(135deg, #1D1D1F 0%, #424245 100%);
    color: #fff;
}

/* Icon */
.stats-impact__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h3);
    color: #fff;
    margin: 0 auto var(--s-20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Number */
.stats-impact__num {
    font-size: var(--fs-hero);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    line-height: 1;
    margin-bottom: var(--s-8);
}

/* Label */
.stats-impact__label {
    font-size: var(--fs-sm);
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: var(--ls-body);
    margin-bottom: var(--s-20);
}

/* Progress bar */
.stats-impact__bar {
    width: 100%;
    max-width: 160px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.stats-impact__fill {
    height: 100%;
    width: 0;
    background: rgba(255,255,255,0.6);
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stats-impact__fill.is-animated {
    /* width set by JS based on data-fill attribute */
}

/* ===== SERVICES ===== */
.service {
    padding: var(--s-32);
    background: var(--color-surface);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
    height: 100%;
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.service:hover {
    border-color: var(--sys-separator-opaque);
    box-shadow: var(--shadow-md);
}

.service__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: var(--sys-label);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h4);
    color: #fff;
    margin-bottom: var(--s-20);
}

.service__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    margin-bottom: var(--s-8);
    color: var(--sys-label);
}

.service__desc {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
}

/* ===== STEPS ===== */
.steps {
    display: grid;
    gap: var(--s-16);
}

@media (min-width: 768px) {
    .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-20); }
}

.step {
    padding: var(--s-32) var(--s-24);
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.step__num {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: var(--ls-display);
    color: var(--sys-label-quaternary);
    line-height: 1;
    margin-bottom: var(--s-16);
}

.step__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    margin-bottom: var(--s-8);
}

.step__desc {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
}

/* ===== BLOG CARDS ===== */
/* Base .card → theme.css (single source of truth) */


@media (hover: none) {
    .card:hover { transform: none; box-shadow: none; }
}

.card__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--sys-fill);
    flex-shrink: 0;
    display: block;
}

/* Override WP core img[width][height]{aspect-ratio:attr(width)/attr(height)}
   and global img{height:auto} — needs higher specificity */
img.card__img,
.card > picture img {
    aspect-ratio: 16 / 10 !important;
    height: auto;
    object-fit: cover;
}

/* When image is wrapped in <picture> (WebP delivery) */
.card > picture {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--sys-fill);
}

.card > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.card__label {
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sys-label-secondary);
    margin-bottom: var(--s-8);
}






.card__meta i { font-size: var(--fs-xs); }

/* Featured card */
.card--featured {
    border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
    .card--featured {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .card--featured .card__img {
        aspect-ratio: auto;
        height: 100%;
        min-height: 320px;
    }

    .card--featured > picture {
        aspect-ratio: auto;
        height: 100%;
        min-height: 320px;
    }

    .card--featured > picture img {
        height: 100%;
        aspect-ratio: auto;
    }

    .card--featured .card__body {
        padding: var(--s-40);
        justify-content: center;
    }

    .card--featured .card__title {

        font-size: var(--fs-h2);
        line-height: var(--lh-heading);
    }

    .card--featured .card__excerpt {
        font-size: var(--fs-body);
        -webkit-line-clamp: 4;
    }
}

/* ===== TESTIMONIALS ===== */
.testimonial {
    padding: var(--s-32);
    background: var(--sys-bg);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial__text {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    font-style: italic;
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    flex: 1;
    margin-bottom: var(--s-24);
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--s-12);
    padding-top: var(--s-16);
    border: 0.5px solid var(--sys-separator-opaque);
}

.testimonial__avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sys-label);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-xxs);
    letter-spacing: var(--ls-body);
}

/* When output-buffer wraps avatar img in <picture> */
.testimonial__author > picture {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}

.testimonial__author > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial__name {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--sys-label);
}

.testimonial__role {
    font-size: var(--fs-xs);
    color: var(--sys-label-secondary);
}

/* ===== CTA ===== */
.cta {
    background: var(--sys-label);
    border-radius: var(--radius-xl);
    padding: var(--s-56) var(--s-32);
    text-align: center;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .cta { padding: var(--s-80) var(--s-48); }
}

.cta__title {
    color: #fff;
    margin-bottom: var(--s-16);
}

.cta__desc {
    color: var(--sys-label-secondary);
    font-size: var(--fs-sm);
    max-width: 440px;
    margin: 0 auto var(--s-32);
    line-height: var(--lh-body);
}

.cta__form {
    display: flex;
    gap: var(--s-12);
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 575px) {
    .cta__form { flex-direction: column; }
}

.cta__input {
    flex: 1;
    padding: 12px 16px;
    font-family: var(--font);
    font-size: var(--fs-sm);
    background: rgba(255,255,255,0.08);
    border: 0.5px solid rgba(255,255,255,0.15);
    border-radius: var(--r-sm);
    color: #fff;
    -webkit-appearance: none;
}

.cta__input::placeholder { color: rgba(255,255,255,0.3); }

.cta__input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
}

.cta .btn--white {
    background: var(--color-surface);
    color: var(--sys-label);
}

.cta .btn--white:hover {
    background: var(--sys-fill);
    color: var(--sys-label);
    opacity: 1;
}

/* ===== ABOUT FEATURES ===== */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-12);
}

@media (min-width: 576px) {
    .features-grid { grid-template-columns: 1fr 1fr; }
}

.feature {
    display: flex;
    gap: var(--s-16);
    padding: var(--s-20);
    background: var(--sys-bg);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-lg);
}

.feature__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--r-sm);
    background: var(--sys-label);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-sm);
}

.feature__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--sys-label);
    margin-bottom: 2px;
}

.feature__desc {
    font-size: var(--fs-xs);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
}

/* ===== APPLE-STYLE EXPANDABLE CARDS ===== */
.apple-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-12);
}

@media (min-width: 768px) {
    .apple-cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-16); }
}

@media (min-width: 992px) {
    .apple-cards--five { grid-template-columns: repeat(3, 1fr); }
    .apple-cards--five .apple-card:nth-child(4),
    .apple-cards--five .apple-card:nth-child(5) {
        /* Last two cards span half each on last row */
    }
}

.apple-card {
    background: var(--sys-fill);
    border-radius: var(--radius-xl);
    padding: var(--s-32);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
    overflow: hidden;
}

@media (min-width: 768px) {
    .apple-card { padding: var(--s-32) var(--s-32) var(--s-40); min-height: 260px; }
}

.apple-card:hover {
    background: var(--sys-separator-opaque);
}

.apple-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--s-24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h2);
    color: var(--sys-label);
}

.apple-card__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    color: var(--sys-label);
    margin-bottom: var(--s-8);
}

.apple-card__desc {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    flex: 1;
}

/* Expand content (hidden by default) */
.apple-card__expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
    opacity: 0;
}

.apple-card.is-expanded .apple-card__expand {
    max-height: 300px;
    opacity: 1;
}

.apple-card__expand-content {
    padding-top: var(--s-16);
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    border-top: 0.5px solid var(--sys-separator-opaque);
    margin-top: var(--s-16);
}

/* Plus button */
.apple-card__toggle {
    position: absolute;
    bottom: var(--s-20);
    right: var(--s-20);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sys-label);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--duration) var(--ease), background var(--duration);
}

.apple-card__toggle i {
    color: #fff;
    font-size: var(--fs-h4);
    transition: transform var(--duration) var(--ease);
}

.apple-card.is-expanded .apple-card__toggle i {
    transform: rotate(45deg);
}

.apple-card__toggle:hover {
    background: var(--sys-label-secondary);
}

/* ===== SERVICE WIDGETS (large icon style) ===== */
.service-widget {
    padding: var(--s-32);
    background: var(--color-surface);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
    height: 100%;
    text-align: center;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.service-widget:hover {
    border-color: var(--sys-separator-opaque);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
    .service-widget { padding: var(--s-40) var(--s-32); }
}

.service-widget__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: var(--sys-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h2);
    color: var(--sys-blue);
    margin: 0 auto var(--s-20);
}

.service-widget__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    color: var(--sys-label);
    margin-bottom: var(--s-8);
}

.service-widget__desc {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
}

/* ===== FAQ ACCORDION ===== */
.faq-list {
    max-width: 720px;
    margin: 0 auto;
}

.faq-item {
    border: 0.5px solid var(--sys-separator-opaque);
}

.faq-item:first-child {
    border: 0.5px solid var(--sys-separator-opaque);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-20) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--sys-label);
    text-align: left;
    gap: var(--s-16);
    transition: color var(--duration);
}

.faq-question:hover { color: var(--sys-blue); }

.faq-question i {
    font-size: var(--fs-h4);
    color: var(--sys-blue);
    transition: transform var(--duration) var(--ease);
    flex-shrink: 0;
}

.faq-item.is-open .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
}

.faq-answer__inner {
    padding-bottom: var(--s-24);
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
}

/* FIX — was 300px (clipped long answers). JS sets exact scrollHeight;
   this is the no-JS fallback only. */
.faq-item.is-open .faq-answer {
    max-height: 4000px;
}

/* ===== ABOUT SECTION WITH SIDE STATS ===== */
.about-stats {
    display: grid;
    gap: var(--s-16);
    margin-top: var(--s-40);
}

@media (min-width: 576px) {
    .about-stats { grid-template-columns: repeat(3, 1fr); }
}

.about-stat {
    padding: var(--s-24);
    background: var(--sys-bg);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
}

.about-stat__label {
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sys-label-secondary);
    margin-bottom: var(--s-8);
}

.about-stat__num {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    color: var(--sys-blue);
    line-height: 1;
    margin-bottom: var(--s-8);
}

.about-stat__desc {
    font-size: var(--fs-xs);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
}

/* ===== FRAMES: LAYOUT WIDTH SYSTEM ===== */
/* prefix_class: frames-width-{value} — applied on Elementor widget wrapper */

/* Full Width */
.frames-width-full .wrap,
.frames-width-full .fti-grid,
.frames-width-full .ft-title-wrap,
.frames-width-full .frames-btn-wrap,
.frames-width-full .fi-wrap,
.frames-width-full .hero-visual__content,
.frames-width-full .fsc-wrap {
    max-width: 100%;
}

/* Wide (1400px) */
.frames-width-wide .wrap,
.frames-width-wide .fti-grid,
.frames-width-wide .ft-title-wrap,
.frames-width-wide .frames-btn-wrap,
.frames-width-wide .fi-wrap,
.frames-width-wide .hero-visual__content,
.frames-width-wide .fsc-wrap {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Narrow (680px) */
.frames-width-narrow .wrap,
.frames-width-narrow .fti-grid,
.frames-width-narrow .ft-title-wrap,
.frames-width-narrow .frames-btn-wrap,
.frames-width-narrow .fi-wrap,
.frames-width-narrow .hero-visual__content,
.frames-width-narrow .fsc-wrap {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== FRAMES: CLIENTS CAROUSEL & MARQUEE ===== */
.clients-swiper {
    position: relative;
    overflow: hidden;
}

.clients-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.clients-swiper .clients__logo {
    justify-content: center;
    width: 100%;
}

.clients-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--sys-separator-opaque);
    color: var(--sys-label-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    box-shadow: var(--shadow-md);
}

.clients-arrow:hover {
    background: var(--sys-fill);
    border-color: var(--sys-separator-opaque);
    box-shadow: var(--shadow-lg);
}

.clients-arrow--prev { left: -18px; }
.clients-arrow--next { right: -18px; }

.clients-swiper .swiper-pagination {
    position: relative;
    margin-top: var(--s-16);
}

.clients-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--sys-label-quaternary);
    opacity: 1;
    transition: all var(--duration) var(--ease);
}

.clients-swiper .swiper-pagination-bullet-active {
    background: var(--sys-blue);
    width: 24px;
    border-radius: var(--radius-full);
}

/* Marquee */
.clients-marquee {
    overflow: hidden;
    position: relative;
}

.clients-marquee::before,
.clients-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.clients-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-surface) 0%, transparent 100%);
}

.clients-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--color-surface) 0%, transparent 100%);
}

@keyframes frames-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.clients-marquee__track {
    display: flex;
    align-items: center;
    gap: var(--s-48);
    width: max-content;
    animation: frames-marquee var(--marquee-duration, 20s) linear infinite;
    animation-direction: var(--marquee-direction, normal);
}

.clients-marquee__item {
    flex-shrink: 0;
}

/* ===== FRAMES: IMAGE MASK SYSTEM ===== */
.fi-masked {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ===== FRAMES: BUTTON WIDGET ===== */
.frames-btn-wrap {
    line-height: 1;
}

/* ===== FRAMES: TEXTICONS WIDGET ===== */
.fti-grid {
    display: grid;
    gap: var(--s-16);
}

.fti-grid--1 { grid-template-columns: 1fr; }
.fti-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fti-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fti-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
    .fti-grid--3, .fti-grid--4 { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .fti-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .fti-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.fti-card {
    padding: var(--s-32);
    background: var(--color-surface);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
    text-decoration: none;
    color: inherit;
    display: block;
}

.fti-card:hover {
    border-color: var(--sys-separator-opaque);
    box-shadow: var(--shadow-lg);
    color: inherit;
    opacity: 1;
}

.fti-card--eq { height: 100%; }

/* ── Icon wrapper (alignment container) ── */
.fti-icon-wrap {
    display: flex;
    justify-content: center;
}

/* ── Position: TOP ── */
.fti-card--top .fti-icon-wrap {
    margin-bottom: var(--s-20);
}

/* ── Position: BELOW TITLE ── */
.fti-card--below-title .fti-icon-wrap {
    margin: var(--s-16) 0;
}

/* ── Position: BELOW CONTENT ── */
.fti-card--below-content .fti-icon-wrap {
    margin-top: var(--s-20);
}

/* ── Position: LEFT (inline) ── */
.fti-card--left {
    display: flex;
    align-items: flex-start;
    gap: var(--s-16);
    text-align: left;
}

.fti-card--left .fti-icon-wrap {
    flex-shrink: 0;
}

/* ── Icon container ── */
.fti-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: var(--sys-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h2);
    color: var(--sys-blue);
    overflow: hidden;
    flex-shrink: 0;
}

.fti-icon img,
.fti-icon .fti-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text/number inside icon container */
.fti-icon .fti-icon-text {
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--ls-heading);
    white-space: nowrap;
    user-select: none;
}

/* ── Content ── */
.fti-content {
    min-width: 0;
}

.fti-title {
    font-size: var(--fs-h4);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    color: var(--sys-label);
    margin-bottom: var(--s-8);
}

.fti-text {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    margin: 0;
}


/* ===== FRAMES: TITLE WIDGET ===== */
.ft-title-wrap {
    /* defaults handled by Elementor controls */
}

.ft-heading {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    color: var(--sys-label);
    margin: 0 0 var(--s-12);
}

.ft-subtitle {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    margin: 0 0 var(--s-16);
}

.ft-label {
    /* Inherits .section__label via class in render */
}

.ft-desc {
    font-size: var(--fs-body);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    margin-top: var(--s-16);
}

.ft-desc p:last-child {
    margin-bottom: 0;
}

.ft-separator {
    width: 60px;
    height: 3px;
    background: var(--sys-blue);
    border-radius: 2px;
}

/* ===== FRAMES: IMAGE WIDGET ===== */
.fi-wrap {
    line-height: 0;
}

.fi-wrap,
.fi-wrap a {
    display: inline-block;
    text-decoration: none;
}

.fi-frame {
    position: relative;
    display: inline-block;
    line-height: 0;
    overflow: hidden;
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.fi-frame--active {
    /* Frame visible — padding/bg from Elementor controls */
}

.fi-img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), filter 0.3s var(--ease);
}

/* When output-buffer wraps fi-img in <picture> */
.fi-frame picture {
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
}

.fi-frame picture .fi-img {
    width: 100%;
}

.fi-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
}

/* Hover animations */
.fi-hover--zoom-in:hover .fi-img {
    transform: scale(1.08);
}

.fi-hover--zoom-out .fi-img {
    transform: scale(1.08);
}

.fi-hover--zoom-out:hover .fi-img {
    transform: scale(1);
}

.fi-hover--lift:hover {
    transform: translateY(-4px);
}

.fi-hover--tilt:hover .fi-img {
    transform: perspective(600px) rotateY(3deg);
}

/* Caption */
.fi-caption {
    font-size: var(--fs-xs);
    color: var(--sys-label-secondary);
    margin-top: var(--s-8);
    line-height: var(--lh-body);
    text-align: inherit;
}

/* ===== FRAMES: SCROLLCARDS WIDGET ===== */
.fsc-wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--s-80) var(--s-20);
}

.fsc-header {
    margin-bottom: var(--s-48);
}

.fsc-label {
    margin-bottom: var(--s-12);
}

.fsc-title {
    margin-bottom: var(--s-12);
}

.fsc-subtitle {
    max-width: 600px;
}

/* Columns layout */
.fsc-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-16);
    align-items: start;
}

.fsc-columns--static .fsc-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
}

@media (max-width: 767px) {
    .fsc-columns {
        grid-template-columns: 1fr;
    }
}

/* Card */
.fsc-card {
    padding: var(--s-24);
    background: var(--color-surface);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    text-decoration: none;
    color: inherit;
    display: block;
}

.fsc-card:hover {
    border-color: var(--sys-separator-opaque);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

/* Card left layout */
.fsc-card--left {
    display: flex;
    align-items: flex-start;
    gap: var(--s-12);
}

.fsc-card--left .fsc-icon-wrap {
    flex-shrink: 0;
}

.fsc-card--left .fsc-body {
    min-width: 0;
    flex: 1;
}

/* Icon */
.fsc-icon-wrap {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--s-12);
}

.fsc-card--left .fsc-icon-wrap {
    margin-bottom: 0;
}

.fsc-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    background: var(--sys-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h3);
    color: var(--sys-blue);
    overflow: hidden;
    flex-shrink: 0;
}

.fsc-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* When output-buffer wraps icon img in <picture> */
.fsc-icon picture {
    width: 100%;
    height: 100%;
    line-height: 0;
}

.fsc-icon picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fsc-icon .fsc-icon-text {
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--ls-heading);
    white-space: nowrap;
}

/* Card title */
.fsc-card-title {
    font-size: var(--fs-h4);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    color: var(--sys-label);
    margin: 0 0 var(--s-8);
}

/* Card text */
.fsc-card-text {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    line-height: var(--lh-body);
    margin: 0;
}

/* Footer */
.fsc-footer {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    margin-top: var(--s-16);
    padding-top: var(--s-12);
    border: 0.5px solid var(--sys-separator-opaque);
    font-size: var(--fs-xs);
    color: var(--sys-label-secondary);
}

.fsc-footer-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.fsc-footer-icon {
    font-size: var(--fs-body);
    color: var(--sys-label-secondary);
    flex-shrink: 0;
}

.fsc-footer-text {
    line-height: var(--lh-body);
}
/* ═══ LIGHTBOX ═══ */
.fr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-24);
}

.fr-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fr-lightbox__content {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 85vh;
}

.fr-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

.fr-lightbox__close {
    position: absolute;
    top: var(--s-16);
    right: var(--s-16);
    z-index: 3;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 50%;
    font-size: var(--fs-h3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.fr-lightbox__close:hover { background: rgba(255,255,255,.2); }

.fr-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 50%;
    font-size: var(--fs-h2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.fr-lightbox__nav:hover { background: rgba(255,255,255,.25); }
.fr-lightbox__nav--prev { left: var(--s-16); }
.fr-lightbox__nav--next { right: var(--s-16); }

.fr-lightbox__counter {
    position: absolute;
    bottom: var(--s-16);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.6);
    font-family: var(--font);
}

/* ===== NEWS HERO ===== */
.nhero { padding: var(--s-32) 0; }

.nhero__grid {
    display: grid;
    gap: var(--s-16);
}

@media (min-width: 768px) {
    .nhero__grid {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--s-24);
    }
}

.nhero__featured .card--featured {
    height: 100%;
}

.nhero__sidebar {
    display: grid;
    gap: var(--s-16);
}

@media (min-width: 768px) {
    .nhero__sidebar {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

.nhero__secondary {
    display: flex;
    flex-direction: column;
}

.nhero__secondary .card {
    flex: 1;
}

.card--compact .card__img {
    aspect-ratio: 16 / 10;
}
.card--compact .card__body {
    padding: var(--s-16);
}
.card--compact .card__title {

    font-size: var(--fs-sm);
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== NEWS TICKER ===== */
.nticker {
    display: flex;
    align-items: center;
    background: var(--sys-label);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 10;
}

.nticker__badge {
    flex-shrink: 0;
    padding: var(--s-8) var(--s-16);
    background: #FF3B30;
    color: #fff;
    font-size: var(--fs-xxs);
    font-weight: 700;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    z-index: 2;
}

.nticker__track {
    flex: 1;
    overflow: hidden;
    display: flex;
    --ticker-speed: 30s;
    --ticker-pause: paused;
}

.nticker__track:hover {
    --ticker-pause: paused;
}

.nticker__scroll {
    display: flex;
    align-items: center;
    animation: tickerScroll var(--ticker-speed) linear infinite;
    flex-shrink: 0;
}

.nticker__track:hover .nticker__scroll {
    animation-play-state: var(--ticker-pause);
}

.nticker__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
    padding: var(--s-8) var(--s-16);
}

.nticker__item a {
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--duration) var(--ease);
}

.nticker__item a:hover {
    opacity: 0.7;
}

@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ===== CATEGORY POSTS BLOCK ===== */
.catblock__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-12);
    margin-bottom: var(--s-24);
    padding-bottom: var(--s-16);
    border-bottom: 2px solid var(--sys-label);
}

.catblock__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    margin: 0;
}

/* ===== NEWS LIST (shared by Category Posts & Tabbed Posts) ===== */
.nlist {
    display: flex;
    flex-direction: column;
}

.nlist__item {
    display: flex;
    gap: var(--s-16);
    padding: var(--s-16) 0;
    border-bottom: 0.5px solid var(--sys-separator-opaque);
    align-items: flex-start;
}

.nlist__item:last-child {
    border-bottom: none;
}

.nlist__img {
    flex-shrink: 0;
    width: 100px;
    height: 68px;
    border-radius: var(--r-sm);
    overflow: hidden;
    display: block;
}

.nlist__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nlist__body {
    flex: 1;
    min-width: 0;
}

.nlist__body .card__title {

    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
}

.nlist__body .card__label {
    margin-bottom: var(--s-4);
    font-size: var(--fs-xxs);
}

.nlist__body .card__meta {
    margin-top: var(--s-4);
    padding-top: 0;
    border-top: none;
    font-size: var(--fs-xxs);
}

/* ===== TRENDING POSTS ===== */
.trending {
    background: var(--color-surface);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
    padding: var(--s-24);
}

.trending__title {
    font-size: var(--fs-h4);
    font-weight: 700;
    margin: 0 0 var(--s-16);
    padding-bottom: var(--s-12);
    border-bottom: 2px solid var(--sys-label);
    display: flex;
    align-items: center;
    gap: var(--s-8);
}

.trending__list {
    display: flex;
    flex-direction: column;
}

.trending__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-12);
    padding: var(--s-12) 0;
    border-bottom: 0.5px solid var(--sys-separator);
}

.trending__item:last-child { border-bottom: none; }

.trending__number {
    flex-shrink: 0;
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    color: var(--sys-separator-opaque);
    line-height: 1;
    width: 2.2rem;
    text-align: center;
}

.trending__item:first-child .trending__number {
    color: var(--sys-blue);
}

.trending__thumb {
    flex-shrink: 0;
    width: 70px;
    height: 50px;
    border-radius: var(--r-xs);
    overflow: hidden;
    display: block;
}

.trending__img {
    width: 100%;
    height: 100%!IMPORTANT;
    object-fit: cover;
    display: block;
}

.trending__content {
    flex: 1;
    min-width: 0;
}

.trending__post-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-heading);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending__post-title a {
    color: var(--sys-label);
    text-decoration: none;
}

.trending__post-title a:hover {
    opacity: 0.6;
}

.trending__meta {
    font-size: var(--fs-xxs);
    color: var(--sys-label-secondary);
    margin-top: var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.trending__sep {
    opacity: 0.4;
}

/* ── Style variants ── */
.trending--bordered .trending__item {
    border-bottom-color: var(--sys-separator-opaque);
}

.trending--minimal .trending__number { display: none; }

/* ===== AD SLOT ===== */
.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: var(--s-24) auto;
}

.ad-slot__label {
    font-size: var(--fs-xxs);
    color: var(--sys-label-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    margin-bottom: var(--s-4);
}

.ad-slot__content {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ad-slot--inline {
    background: var(--sys-bg);
    border: 0.5px dashed var(--sys-separator-opaque);
    border-radius: var(--radius-lg);
    padding: var(--s-16);
    min-height: 120px;
}

/* ===== TABBED CATEGORY POSTS ===== */
.tposts__section-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    margin: 0 0 var(--s-16);
}

.tposts__nav {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: var(--s-24);
    border-bottom: 1px solid var(--sys-separator-opaque);
    padding-bottom: 0;
}

.tposts__nav::-webkit-scrollbar { display: none; }

.tposts__tab {
    flex-shrink: 0;
    padding: var(--s-8) var(--s-16);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--sys-label-secondary);
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: -1px;
}

.tposts__tab:hover {
    color: var(--sys-label);
}

.tposts__tab.is-active {
    color: var(--sys-label);
    border-bottom-color: var(--sys-blue);
    font-weight: 600;
}

.tposts__panel {
    display: none;
}

.tposts__panel.is-active {
    display: block;
}

/* ===== NEWSLETTER ===== */
.newsletter {
    background: var(--sys-fill);
    border: 0.5px solid var(--sys-separator-opaque);
    border-radius: var(--radius-xl);
    padding: var(--s-32);
}

.newsletter__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
}

.newsletter__icon {
    font-size: var(--fs-h2);
    color: var(--sys-blue);
}

.newsletter__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    margin: 0;
    letter-spacing: var(--ls-heading);
}

.newsletter__desc {
    font-size: var(--fs-sm);
    color: var(--sys-label-secondary);
    margin: 0;
    line-height: var(--lh-body);
}

.newsletter__form {
    display: flex;
    gap: var(--s-8);
    max-width: 500px;
}

.newsletter__input {
    flex: 1;
    padding: var(--s-12) var(--s-16);
    border: 1px solid var(--sys-separator-opaque);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    background: var(--color-surface);
    color: var(--sys-label);
    transition: border-color var(--duration) var(--ease);
    min-width: 0;
}

.newsletter__input:focus {
    outline: none;
    border-color: var(--sys-blue);
}

.newsletter__btn {
    flex-shrink: 0;
    padding: var(--s-12) var(--s-24);
    background: var(--sys-label);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.newsletter__btn:hover {
    background: var(--sys-blue);
}

.newsletter__gdpr {
    font-size: var(--fs-xxs);
    color: var(--sys-label-tertiary);
    margin: var(--s-4) 0 0;
}

.newsletter__msg {
    font-size: var(--fs-sm);
    margin: var(--s-8) 0 0;
}

.newsletter__msg.is-success { color: #34C759; }
.newsletter__msg.is-error { color: #FF3B30; }

/* ── Newsletter Banner variant ── */
.newsletter--banner {
    border-radius: 0;
    padding: var(--s-48) var(--s-32);
    background: var(--sys-label);
    border: none;
}

.newsletter--banner .newsletter__inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
}

.newsletter--banner .newsletter__icon { color: #fff; opacity: 0.6; }
.newsletter--banner .newsletter__title { color: #fff; }
.newsletter--banner .newsletter__desc { color: var(--sys-label-tertiary); }
.newsletter--banner .newsletter__form { max-width: 460px; width: 100%; }
.newsletter--banner .newsletter__input { border-color: var(--sys-label-secondary); background: var(--sys-label); color: #fff; }
.newsletter--banner .newsletter__btn { background: var(--sys-blue); }
.newsletter--banner .newsletter__btn:hover { background: var(--sys-blue); }

/* ── Newsletter Inline variant ── */
@media (min-width: 768px) {
    .newsletter--inline .newsletter__inner {
        flex-direction: row;
        align-items: center;
    }
    .newsletter--inline .newsletter__text {
        flex: 1;
    }
    .newsletter--inline .newsletter__form-wrap {
        flex-shrink: 0;
    }
}

/* =================================================================
   MOBILE RESPONSIVE OVERRIDES
   Complete mobile-first fix — Apple-grade spacing & typography
   ================================================================= */

/* ── Small screens (≤575px) ── */
@media (max-width: 575px) {
    :root {
        --fs-body: 1rem;              /* 16px on small screens */
        --fs-h4: 1rem;                /* match body on mobile */
        --s-48: 32px;
        --s-56: 36px;
        --s-64: 40px;
        --s-80: 48px;
        --s-96: 56px;
        --s-120: 64px;
    }

    /* Card mobile compact */
    .card__body { padding: var(--s-16); }
    .card__excerpt { -webkit-line-clamp: 2; }
    .card__meta { gap: var(--s-8); margin-top: var(--s-12); padding-top: var(--s-8); }

    /* Featured card: full stack on mobile */
    .card--featured { display: flex; flex-direction: column; }
    .card--featured .card__img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
    .card--featured > picture { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
    .card--featured .card__body { padding: var(--s-16); }
    .card--featured .card__title,
    .card--featured .card__title.t-h2,
    .card--featured .t-h2 { font-size: var(--fs-h3); }

    /* Regular card title: tighter on mobile */
    .card__title { font-size: var(--fs-body); }
    .card__label { margin-bottom: var(--s-4); }

    /* News hero: full-width on mobile */
    .nhero__grid { gap: var(--s-12); }
    .nhero__sidebar { gap: var(--s-12); }

    /* Category block */
    .catblock__header { margin-bottom: var(--s-16); padding-bottom: var(--s-12); }

    /* List items compact */
    .nlist__item { gap: var(--s-12); padding: var(--s-12) 0; }
    .nlist__img { width: 80px; height: 56px; }

    /* Trending compact */
    .trending { padding: var(--s-16); }
    .trending__item { gap: var(--s-8); padding: var(--s-8) 0; }
    .trending__thumb { width: 56px; height: 40px; }
    .trending__number { font-size: var(--fs-h3); width: 1.8rem; }

    /* Newsletter compact */
    .newsletter { padding: var(--s-20); }
    .newsletter__form { flex-direction: column; max-width: 100%; }
    .newsletter__btn { width: 100%; text-align: center; }
    .newsletter--banner { padding: var(--s-32) var(--s-20); }
    .newsletter--banner .newsletter__form { max-width: 100%; }

    /* Ad slots */
    .ad-slot { margin: var(--s-16) auto; }

    /* Section spacing */
    .section { padding: var(--s-32) 0; }

    /* Hero spacing */
    .hero { padding: calc(var(--header-h) + var(--s-32)) 0 var(--s-32); }
    .hero__stats { gap: var(--s-8); }
    .hero__stat { padding: var(--s-12) var(--s-8); }
    .hero__stat-num { font-size: var(--fs-h3); }

    /* Steps: 1 col on small screens */
    .steps { grid-template-columns: 1fr; }
    .step { padding: var(--s-20) var(--s-16); }

    /* Footer columns: 1 col on small screens */
    .footer__columns { grid-template-columns: 1fr; gap: var(--s-20); }

    /* Article hero */
    .article-hero { padding: calc(var(--header-h) + var(--s-24)) 0 var(--s-20); }
    .article-hero__title { font-size: var(--fs-h1); }

    /* Featured image */
    .featured-img { margin-bottom: var(--s-32); border-radius: var(--radius-lg); }

    /* About widget */
    .about-stats { grid-template-columns: repeat(2, 1fr); }

    /* Scroll cards: full bleed */
    .fsc-columns { grid-template-columns: 1fr; }

    /* Texticons: 1 col */
    .fti-grid--2, .fti-grid--3, .fti-grid--4 { grid-template-columns: 1fr; }

    /* CTA form */
    .cta-form__card { padding: var(--s-24); }

    /* Testimonials */
    .testimonial { padding: var(--s-20); }

    /* Stats impact cards */
    .stats-impact__card { padding: var(--s-20) var(--s-16); }

    /* Tabbed posts: scroll tabs */
    .tposts__tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--s-4); }
    .tposts__tabs::-webkit-scrollbar { display: none; }
    .tposts__tab { flex-shrink: 0; padding: var(--s-8) var(--s-12); font-size: var(--fs-xs); }

    /* Blog cards section header */
    .section__header { margin-bottom: var(--s-24); }
    .section__label { font-size: var(--fs-xxs); }

    /* Mobile menu: bigger touch targets */
    .mobile-menu__link { padding: var(--s-12) var(--s-8); }

    /* Copyright */
    .copyright__inner { padding: var(--s-16) 0; }

    /* Page hero */
    .page-hero { padding: calc(var(--header-h) + var(--s-24)) 0 var(--s-24); }

    /* Marquee: reduce size */
    .fr-mqt__item { font-size: var(--fs-h3); padding: var(--s-8) 0; }

    /* Apple cards: 1 col */
    .apple-cards { grid-template-columns: 1fr; }
}

/* ── Medium screens (576–767px) ── */
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --fs-body: 1rem;              /* 16px on tablets-small */
    }

    .card__body { padding: var(--s-20); }

    /* Texticons: 2 cols */
    .fti-grid--3, .fti-grid--4 { grid-template-columns: repeat(2, 1fr); }

    /* Apple cards: 2 cols */
    .apple-cards { grid-template-columns: repeat(2, 1fr); }

    /* About stats: 3 cols */
    .about-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ── All mobile (≤767px) shared ── */
@media (max-width: 767px) {
    /* Note: overflow-x:hidden is on html globally — do NOT add it to body (breaks sticky header) */

    /* Remove hover effects on touch */
    .card:hover { transform: none; box-shadow: var(--shadow-md); }
    .footer-widget:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
    .scroll-top:hover { transform: none; }

    /* Row gap fix */
    .row.g-3 { --bs-gutter-y: 0.75rem; }
    .row.g-5 { --bs-gutter-y: 1.5rem; }

    /* Footer: more compact */
    .footer__top { padding: var(--s-32) 0; }
    .footer__columns { padding: var(--s-24) 0; }
    .footer__widgets { padding: var(--s-24) 0; }
    .footer__social-row { padding: var(--s-20) 0; }

    /* Sections reduced padding */
    .cta-form { padding: var(--s-48) 0; }
    .stats-impact { padding: var(--s-48) 0; }

    /* Breadcrumb compact */
    .breadcrumb { margin-bottom: var(--s-16); }

    /* Related section */
    .related-section { padding: var(--s-32) 0; }

    /* Services grid */
    .services-grid { gap: var(--s-12); }

    /* Widget spacer sections */
    .fr-counter__grid { gap: var(--s-16); }

    /* Pricing table fix */
    .fr-price__grid { grid-template-columns: 1fr; }
    .fr-price__plan { margin-bottom: var(--s-16); }

    /* Timeline compact */
    .fr-tl__item { margin-bottom: var(--s-24); }
}

/* ── Tablet (768–991px) ── */
@media (min-width: 768px) and (max-width: 991px) {
    /* Footer widgets: 2 across */
    .footer__widgets { grid-template-columns: repeat(2, 1fr); }

    /* Steps: 2 across */
    .steps { grid-template-columns: repeat(2, 1fr); }

    /* Apple cards: 2 across */
    .apple-cards { grid-template-columns: repeat(2, 1fr); }

    /* Section spacing medium */
    .section { padding: var(--s-48) 0; }
}


@media print {
    .nav, .scroll-top, .mobile-menu { display: none; }
    .section { padding: 2rem 0; }
    body { font-size: 12pt; }
}




/* =================================================================
   APPLE SERVICES-STYLE HOMEPAGE FEED
   ─────────────────────────────────────────────────────────────────
   Pattern: stacked full-width cards, massive imagery, centered text,
   no borders, no shadows, huge breathing room.
   Adapted from apple.com/services for article content.
   ================================================================= */

/* ── Feed wrapper ── */
.asfeed { background: var(--sys-bg); }

/* ── Section structure ── */
.asfeed__section {
    padding: var(--s-96) 0;
}

.asfeed__section + .asfeed__section {
    border-top: 0.5px solid var(--sys-separator);
}

.asfeed__section-head {
    text-align: center;
    margin-bottom: var(--s-56);
}

.asfeed__section-label {
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sys-blue);
    margin-bottom: var(--s-12);
    display: block;
}

.asfeed__section-title {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-heading);
    color: var(--sys-label);
}

.asfeed__section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--sys-blue);
    margin-top: var(--s-16);
}

.asfeed__section-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════
   HERO CARD — Full-width Apple Services-style
   Each article = massive visual block
   ═══════════════════════════════════════════════ */
.ascard {
    display: block;
    text-align: center;
    margin-bottom: var(--s-56);
}

.ascard:last-child { margin-bottom: 0; }

/* ── Image ── */
.ascard__img-link {
    display: block;
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    background: var(--color-surface);
}

.ascard__img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
    transition: transform 8s cubic-bezier(.19,1,.22,1);
}

.ascard:hover .ascard__img {
    transform: scale(1.04);
}

@media (hover: none) {
    .ascard:hover .ascard__img { transform: none; }
}

/* ── Content below image ── */
.ascard__body {
    padding: var(--s-32) var(--s-16) 0;
    max-width: 680px;
    margin: 0 auto;
}

.ascard__cat {
    display: inline-block;
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--sys-blue);
    text-decoration: none;
    margin-bottom: var(--s-12);
}

.ascard__cat:hover { text-decoration: underline; }

.ascard__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    color: var(--sys-label);
    margin-bottom: var(--s-12);
}

.ascard__title a {
    color: inherit;
    text-decoration: none;
}

.ascard__title a:hover { color: var(--sys-blue); }

.ascard__excerpt {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--sys-label-secondary);
    margin-bottom: var(--s-16);
}

.ascard__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-16);
    font-size: var(--fs-xs);
    color: var(--sys-label-tertiary);
}

.ascard__meta i { font-size: 0.75em; }

.ascard__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--sys-blue);
    margin-top: var(--s-12);
    transition: gap .2s var(--ease);
}

.ascard__link:hover { gap: var(--s-8); }

/* ═══════════════════════════════════════════════
   FEATURED HERO — First card, even bigger
   ═══════════════════════════════════════════════ */
.ascard--hero .ascard__img {
    aspect-ratio: 21 / 9;
}

.ascard--hero .ascard__title {
    font-size: var(--fs-hero);
}

.ascard--hero .ascard__excerpt {
    font-size: var(--fs-h4);
    line-height: var(--lh-body);
}

.ascard--hero .ascard__body {
    max-width: 740px;
}

/* ═══════════════════════════════════════════════
   GRID CARDS — For "Latest" and "Recommended"
   Dense layout, 2-3 columns
   ═══════════════════════════════════════════════ */
.asfeed__grid {
    display: grid;
    gap: var(--s-32);
    grid-template-columns: repeat(3, 1fr);
}

.asfeed__grid .ascard {
    margin-bottom: 0;
    text-align: left;
}

.asfeed__grid .ascard__img {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
}

.asfeed__grid .ascard__img-link {
    border-radius: var(--radius-lg);
}

.asfeed__grid .ascard__body {
    padding: var(--s-16) 0 0;
    max-width: none;
    margin: 0;
}

.asfeed__grid .ascard__title {
    font-size: var(--fs-h4);
    font-weight: 600;
}

.asfeed__grid .ascard__excerpt {
    font-size: var(--fs-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 991px) {
    .asfeed__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .asfeed__section { padding: var(--s-48) 0; }
    .asfeed__section-head { margin-bottom: var(--s-32); }
    .asfeed__section-title { font-size: var(--fs-h2); }

    .ascard { margin-bottom: var(--s-32); }
    .ascard__img { aspect-ratio: 16 / 10; }
    .ascard__body { padding: var(--s-20) 0 0; }
    .ascard__title { font-size: var(--fs-h3); }
    .ascard__excerpt { font-size: var(--fs-sm); }

    .ascard--hero .ascard__img { aspect-ratio: 16 / 10; }
    .ascard--hero .ascard__title { font-size: var(--fs-h2); }
    .ascard--hero .ascard__excerpt { font-size: var(--fs-body); }

    .asfeed__grid {
        grid-template-columns: 1fr;
        gap: var(--s-24);
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .asfeed__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-24); }
}


/* =================================================================
   ADS CONTAINMENT — Prevent ads from breaking page layout
   ─────────────────────────────────────────────────────────────────
   Bulletproof containment: ads cannot push content, overflow,
   or cause CLS (Cumulative Layout Shift).
   ================================================================= */

/* ── Base ad wrapper ── */
.fads {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: var(--s-24) 0;
    clear: both;
    box-sizing: border-box;
    position: relative;
}

.fads__label {
    font-size: var(--fs-xxs);
    color: var(--sys-label-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    margin-bottom: var(--s-4);
    line-height: 1;
}

.fads__inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

/* ── Slot-specific spacing ── */
.fads--slot-1,
.fads--slot-4 { margin: var(--s-32) 0; }
.fads--slot-2,
.fads--slot-3 { margin: var(--s-16) 0; min-height: 100px; }
.fads--sticky { position: sticky; top: calc(var(--nav-h) + var(--s-16)); }

/* ── Visibility ── */
@media (max-width: 767px)  { .fads--desktop-only { display: none !important; } }
@media (min-width: 768px)  { .fads--mobile-only  { display: none !important; } }

/* ── Elementor ad-slot widget ── */
.ad-slot {
    max-width: 100%;
}

/* ── Global containment for any ad container ── */
.wrap .fads,
.entry-content .fads,
.wrap .ad-slot,
.asfeed .fads,
.asfeed .ad-slot {
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Google Auto Ads — NO custom overrides ── */
/* AdSense JS handles its own positioning and sizing.
   Custom CSS on Google elements causes click-blocking and layout issues.
   Only our .fads wrapper provides spacing — Google handles the rest. */

/* ── Prevent ads from pushing grid/flex layouts ── */
.asfeed__grid .fads,
.asfeed__grid .ad-slot,
.nhero__grid .fads,
.row .fads {
    grid-column: 1 / -1;
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   APPLE SHOWCASE — Full-bleed image cards (apple.com/services)
   ═══════════════════════════════════════════════════════════════ */
.apple-sc {
    max-width: var(--article-full-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.apple-sc__grid {
    display: grid;
    gap: 20px;
}

.apple-sc__grid--1col { grid-template-columns: 1fr; }
.apple-sc__grid--2col { grid-template-columns: repeat(2, 1fr); }
.apple-sc__grid--3col { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {
    .apple-sc__grid--2col,
    .apple-sc__grid--3col { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .apple-sc__grid--3col { grid-template-columns: repeat(2, 1fr); }
}

.apple-sc__card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.apple-sc__card--small  { min-height: 380px; }
.apple-sc__card--medium { min-height: 480px; }
.apple-sc__card--large  { min-height: 580px; }
.apple-sc__card--xlarge { min-height: 680px; }

@media (max-width: 767px) {
    .apple-sc__card--small  { min-height: 320px; }
    .apple-sc__card--medium { min-height: 380px; }
    .apple-sc__card--large  { min-height: 440px; }
    .apple-sc__card--xlarge { min-height: 520px; }
}

.apple-sc__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.apple-sc__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.apple-sc__card:hover .apple-sc__bg img {
    transform: scale(1.03);
}

/* Overlays */
.apple-sc__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.apple-sc__overlay--gradient-bottom {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.05) 70%, transparent 100%);
}

.apple-sc__overlay--gradient-top {
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.05) 70%, transparent 100%);
}

.apple-sc__overlay--dark  { background: rgba(0,0,0,0.45); }
.apple-sc__overlay--light { background: rgba(255,255,255,0.65); }

/* Content */
.apple-sc__content {
    position: relative;
    z-index: 3;
    padding: var(--s-32);
    width: 100%;
    max-width: 560px;
}

@media (min-width: 768px) {
    .apple-sc__content { padding: var(--s-40) var(--s-48); }
}

/* Position variants */
.apple-sc__card--pos-bottom-left   { align-items: flex-end; justify-content: flex-start; }
.apple-sc__card--pos-bottom-center { align-items: flex-end; justify-content: center; }
.apple-sc__card--pos-bottom-center .apple-sc__content { text-align: center; margin: 0 auto; }
.apple-sc__card--pos-top-left      { align-items: flex-start; justify-content: flex-start; }
.apple-sc__card--pos-top-center    { align-items: flex-start; justify-content: center; }
.apple-sc__card--pos-top-center .apple-sc__content { text-align: center; margin: 0 auto; }
.apple-sc__card--pos-center        { align-items: center; justify-content: center; }
.apple-sc__card--pos-center .apple-sc__content { text-align: center; margin: 0 auto; }

/* Text colors */
.apple-sc__card--light-text .apple-sc__label { color: rgba(255,255,255,0.7); }
.apple-sc__card--light-text .apple-sc__title { color: #FFFFFF; }
.apple-sc__card--light-text .apple-sc__desc  { color: rgba(255,255,255,0.8); }

.apple-sc__card--dark-text .apple-sc__label { color: var(--article-text-secondary); }
.apple-sc__card--dark-text .apple-sc__title { color: var(--article-text); }
.apple-sc__card--dark-text .apple-sc__desc  { color: var(--article-text-secondary); }

/* Logo */
.apple-sc__logo {
    width: auto;
    height: 32px;
    object-fit: contain;
    margin-bottom: var(--s-16);
}

@media (min-width: 768px) { .apple-sc__logo { height: 40px; } }

/* Label */
.apple-sc__label {
    display: block;
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--s-8);
}

/* Title */
.apple-sc__title {
    font-family: var(--font);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--s-12);
}

/* Description */
.apple-sc__desc {
    font-family: var(--font);
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.5;
    margin: 0 0 var(--s-20);
    font-weight: 400;
}

/* CTA buttons */
.apple-sc__actions {
    display: flex;
    align-items: center;
    gap: var(--s-20);
    flex-wrap: wrap;
}

.apple-sc__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 400;
    text-decoration: none;
    transition: opacity var(--duration) var(--ease);
}

.apple-sc__btn:hover { opacity: 0.8; }

.apple-sc__btn svg {
    flex-shrink: 0;
    transition: transform var(--duration) var(--ease);
}

.apple-sc__btn:hover svg { transform: translateX(3px); }

.apple-sc__card--light-text .apple-sc__btn--primary   { color: #2997FF; }
.apple-sc__card--dark-text  .apple-sc__btn--primary    { color: var(--c-accent); }
.apple-sc__card--light-text .apple-sc__btn--secondary  { color: rgba(255,255,255,0.85); }
.apple-sc__card--dark-text  .apple-sc__btn--secondary  { color: var(--article-text-secondary); }

/* ── Category Chip Strip ── */
.apple-cat-strip {
    display: flex;
    gap: var(--s-12);
    padding: var(--s-20) var(--gutter);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: var(--article-full-w);
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.apple-cat-strip::-webkit-scrollbar { display: none; }

.apple-cat-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
    padding: 10px 20px;
    background: rgba(120,120,128,0.06);
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--article-text);
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}

.apple-cat-chip:hover,
.apple-cat-chip--active {
    background: var(--article-text);
    color: var(--c-white);
}

.apple-cat-chip i { font-size: 1rem; }


/* ── Category Tabs — Skeleton loading animation ── */
.card--skeleton {
    pointer-events: none;
}

@keyframes framesSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ── Elementor Editor — Force visibility for animated elements ──
   .animate-in sets opacity:0 and needs IntersectionObserver to add .visible.
   In Elementor editor, widgets re-rendered via AJAX are never observed.
   This override forces all animated elements visible in editor context. */
body.elementor-editor-active .animate-in,
body.elementor-editor-active .animate-in[data-delay] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* ══════════════════════════════════════════════════════════
   TEAM WIDGET — fr-team__*
   Apple-style team cards with photo, name, role, social
   ══════════════════════════════════════════════════════════ */
.fr-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-32, 32px);
}

.fr-team__card {
    text-align: center;
    padding: var(--s-32, 32px) var(--s-24, 24px);
    background: var(--c-surface, #ffffff);
    border-radius: var(--radius-xl, 16px);
    border: 1px solid var(--c-border, rgba(0,0,0,0.08));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fr-team__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.fr-team__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto var(--s-16, 16px);
}

.fr-team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fr-team__name {
    font-family: var(--font-display, -apple-system, sans-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--c-heading, #2C3E50);
    margin-bottom: 4px;
}

.fr-team__role {
    font-size: 14px;
    color: var(--c-muted, #94A3B8);
    margin-bottom: var(--s-12, 12px);
}

.fr-team__bio {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text, #64748b);
    margin-bottom: var(--s-16, 16px);
}

.fr-team__socials {
    display: flex;
    justify-content: center;
    gap: var(--s-12, 12px);
}

.fr-team__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--c-muted, #94A3B8);
    background: var(--c-surface-secondary, #f1f5f9);
    transition: all 0.2s ease;
    font-size: 16px;
}

.fr-team__socials a:hover {
    color: #fff;
    background: var(--c-accent, #2B7BBF);
}


/* ══════════════════════════════════════════════════════════
   TIMELINE WIDGET — fr-tl__*
   Vertical timeline with dots, lines, year markers
   ══════════════════════════════════════════════════════════ */
.fr-tl {
    position: relative;
    padding: var(--s-32, 32px) 0;
}

.fr-tl__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c-border, rgba(0,0,0,0.08));
    transform: translateX(-50%);
}

.fr-tl__item {
    position: relative;
    display: flex;
    width: 50%;
    padding-bottom: var(--s-48, 48px);
}

.fr-tl__item--left {
    padding-right: var(--s-48, 48px);
    justify-content: flex-end;
    text-align: right;
}

.fr-tl__item--right {
    margin-left: 50%;
    padding-left: var(--s-48, 48px);
}

.fr-tl__dot {
    position: absolute;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-surface, #fff);
    border: 3px solid var(--c-accent, #2B7BBF);
    z-index: 2;
}

.fr-tl__item--left .fr-tl__dot { right: -7px; }
.fr-tl__item--right .fr-tl__dot { left: -7px; }

.fr-tl__dot--highlight {
    background: var(--c-accent, #2B7BBF);
    width: 18px;
    height: 18px;
    border: 4px solid var(--c-accent, #2B7BBF);
    box-shadow: 0 0 0 4px rgba(0,113,227,0.2);
}

.fr-tl__item--left .fr-tl__dot--highlight { right: -9px; }
.fr-tl__item--right .fr-tl__dot--highlight { left: -9px; }

.fr-tl__content {
    max-width: 420px;
    padding: var(--s-24, 24px);
    background: var(--c-surface, #fff);
    border-radius: var(--radius-xl, 16px);
    border: 1px solid var(--c-border, rgba(0,0,0,0.08));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fr-tl__content:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.fr-tl__content--highlight {
    border-color: var(--c-accent, #2B7BBF);
    background: linear-gradient(135deg, rgba(0,113,227,0.02), rgba(0,113,227,0.06));
}

.fr-tl__year {
    font-family: var(--font-display, -apple-system, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-accent, #2B7BBF);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.fr-tl__title {
    font-family: var(--font-display, -apple-system, sans-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--c-heading, #2C3E50);
    margin-bottom: 8px;
    line-height: 1.3;
}

.fr-tl__desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text, #64748b);
}

@media (max-width: 768px) {
    .fr-tl__line { left: 20px; }
    .fr-tl__item,
    .fr-tl__item--left,
    .fr-tl__item--right {
        width: 100%;
        margin-left: 0;
        padding-left: 52px;
        padding-right: 0;
        text-align: left;
        justify-content: flex-start;
    }
    .fr-tl__item--left .fr-tl__dot,
    .fr-tl__item--right .fr-tl__dot { left: 13px; right: auto; }
    .fr-tl__item--left .fr-tl__dot--highlight,
    .fr-tl__item--right .fr-tl__dot--highlight { left: 11px; right: auto; }
    .fr-tl__content { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   MARQUEE TEXT WIDGET — fr-mqt__*
   Scrolling text banner
   ══════════════════════════════════════════════════════════ */
.fr-mqt {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    padding: var(--s-16, 16px) 0;
}

.fr-mqt__track {
    display: inline-flex;
    animation: framesMarquee var(--marquee-speed, 20s) linear infinite;
}

.fr-mqt--pausable:hover .fr-mqt__track {
    animation-play-state: paused;
}

.fr-mqt__set {
    display: inline-flex;
    align-items: center;
}

.fr-mqt__text {
    font-family: var(--font-display, -apple-system, sans-serif);
    font-weight: 700;
    color: var(--c-heading, #2C3E50);
    padding: 0 var(--s-8, 8px);
}

.fr-mqt__text--xl { font-size: 48px; }
.fr-mqt__text--lg { font-size: 36px; }
.fr-mqt__text--md { font-size: 24px; }
.fr-mqt__text--sm { font-size: 18px; }

.fr-mqt__sep {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent, #2B7BBF);
    margin: 0 var(--s-16, 16px);
    opacity: 0.5;
}

@keyframes framesMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ══════════════════════════════════════════════════════════
   FOOTER BUILDER WIDGETS
   ══════════════════════════════════════════════════════════ */

/* Footer Brand */
.frames-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--s-16, 16px);
}

.frames-footer-brand .footer__logo { display: inline-flex; align-items: center; gap: 8px; }
.frames-footer-brand .footer__logo img { height: 28px; width: auto; }
.frames-footer-brand .footer__logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--c-accent, #2B7BBF); color: #fff;
    font-weight: 700; font-size: 14px;
}
.frames-footer-brand .footer__logo-text { font-size: 18px; font-weight: 700; }
.frames-footer-brand .footer__desc { font-size: 14px; line-height: 1.5; opacity: 0.7; }
.frames-footer-brand .footer__socials { display: flex; gap: 12px; }
.frames-footer-brand .footer__social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; font-size: 16px;
    color: inherit; opacity: 0.5; transition: opacity 0.2s ease;
}
.frames-footer-brand .footer__social:hover { opacity: 1; }

/* Footer Links */
.frames-footer-links .footer__heading {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: var(--s-16, 16px);
    opacity: 0.5;
}
.frames-footer-links .footer__links {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.frames-footer-links .footer__links a {
    font-size: 14px; color: inherit; opacity: 0.7;
    transition: opacity 0.2s ease; text-decoration: none;
}
.frames-footer-links .footer__links a:hover { opacity: 1; }

/* Footer Contact */
.frames-footer-contact .footer__heading {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: var(--s-16, 16px);
    opacity: 0.5;
}
.frames-footer-contact .footer__links {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.frames-footer-contact .footer__links li {
    font-size: 14px; display: flex; align-items: center;
    gap: 8px; opacity: 0.7;
}
.frames-footer-contact .footer__links a {
    color: inherit; text-decoration: none;
    transition: opacity 0.2s ease;
}
.frames-footer-contact .footer__links a:hover { opacity: 1; }
.frames-footer-contact .frc-icon-prefix { font-size: 16px; opacity: 0.6; }





/* ==========================================================================
   NATURAL IMAGE MODE — Show real proportions + blur backdrop
   Controlled per-widget via Elementor panel "Image Display Mode"
   ========================================================================== */

/* ── Base: Natural mode overrides on desktop ── */
.pclab-img-natural .card__image,
.pclab-img-natural .hero-card__image,
.pclab-img-natural .carousel-card__image,
.pclab-img-natural .child-card__image,
.pclab-img-natural .video-showcase__thumb,
.pclab-img-natural .app-card__image {
    position: relative;
    aspect-ratio: auto !important;
    overflow: hidden;
    background: var(--color-surface-secondary);
    min-height: 120px;
    max-height: var(--pclab-img-max-h, 280px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Blur backdrop via ::before ── */
.pclab-img-natural .card__image::before,
.pclab-img-natural .hero-card__image::before,
.pclab-img-natural .carousel-card__image::before,
.pclab-img-natural .child-card__image::before,
.pclab-img-natural .app-card__image::before {
    content: '';
    position: absolute;
    inset: -15px;
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    filter: blur(35px) saturate(1.3) brightness(0.65);
    transform: scale(1.1);
    z-index: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Don't show blur if no background-image set (JS hasn't run) */
.pclab-img-natural .card__image:not([style*="--card-bg"])::before,
.pclab-img-natural .hero-card__image:not([style*="--card-bg"])::before,
.pclab-img-natural .carousel-card__image:not([style*="--card-bg"])::before,
.pclab-img-natural .child-card__image:not([style*="--card-bg"])::before,
.pclab-img-natural .app-card__image:not([style*="--card-bg"])::before {
    display: none;
}

/* ── Image itself: natural proportions ── */
.pclab-img-natural .card__image img,
.pclab-img-natural .hero-card__image img,
.pclab-img-natural .carousel-card__image img,
.pclab-img-natural .child-card__image img,
.pclab-img-natural .app-card__image img {
    position: relative;
    z-index: 1;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: var(--pclab-img-max-h, 280px);
    object-fit: contain !important;
    aspect-ratio: auto !important;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.2));
}

/* ── Hover: subtle lift ── */
.pclab-img-natural .card:hover .card__image img,
.pclab-img-natural .hero-card:hover .hero-card__image img,
.pclab-img-natural .carousel-card:hover .carousel-card__image img {
    transform: scale(1.02);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Hero grid: featured card gets taller max ── */
.pclab-img-natural .hero-card__image {
    max-height: var(--pclab-img-max-h, 380px);
}

.pclab-img-natural .hero-card__image img {
    max-height: var(--pclab-img-max-h, 380px);
}

/* ── Sidebar cards: shorter ── */
.pclab-img-natural .section-one__sidebar .card__image,
.pclab-img-natural .hero-sidebar .hero-card__image {
    max-height: calc(var(--pclab-img-max-h, 280px) * 0.6);
}

.pclab-img-natural .section-one__sidebar .card__image img,
.pclab-img-natural .hero-sidebar .hero-card__image img {
    max-height: calc(var(--pclab-img-max-h, 280px) * 0.6);
}

/* ── Trending: small thumbnails stay as-is ── */
.pclab-img-natural .trending__img {
    object-fit: contain !important;
    aspect-ratio: auto !important;
    background: var(--color-surface-secondary);
    border-radius: var(--radius-sm);
}

/* ── Override inline aspect-ratio from widgets ── */
.pclab-img-natural [style*="aspect-ratio"] {
    aspect-ratio: auto !important;
}


/* ==========================================================================
   MOBILE VARIANTS
   ========================================================================== */

/* ── Desktop natural + Mobile cover (default combo) ── */
@media (max-width: 767px) {
    /* When mobile should be cover, undo natural mode */
    .pclab-img-cover-mob .card__image,
    .pclab-img-cover-mob .hero-card__image,
    .pclab-img-cover-mob .carousel-card__image,
    .pclab-img-cover-mob .child-card__image,
    .pclab-img-cover-mob .app-card__image {
        aspect-ratio: 16/10 !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .pclab-img-cover-mob .card__image::before,
    .pclab-img-cover-mob .hero-card__image::before,
    .pclab-img-cover-mob .carousel-card__image::before,
    .pclab-img-cover-mob .child-card__image::before,
    .pclab-img-cover-mob .app-card__image::before {
        display: none !important;
    }

    .pclab-img-cover-mob .card__image img,
    .pclab-img-cover-mob .hero-card__image img,
    .pclab-img-cover-mob .carousel-card__image img,
    .pclab-img-cover-mob .child-card__image img,
    .pclab-img-cover-mob .app-card__image img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        filter: none !important;
    }
}

/* ── Mobile natural mode (when explicitly chosen) ── */
@media (max-width: 767px) {
    .pclab-img-natural-mob:not(.pclab-img-natural) .card__image,
    .pclab-img-natural-mob:not(.pclab-img-natural) .hero-card__image,
    .pclab-img-natural-mob:not(.pclab-img-natural) .carousel-card__image {
        position: relative;
        aspect-ratio: auto !important;
        overflow: hidden;
        background: var(--color-surface-secondary);
        min-height: 100px;
        max-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pclab-img-natural-mob:not(.pclab-img-natural) .card__image::before,
    .pclab-img-natural-mob:not(.pclab-img-natural) .hero-card__image::before {
        content: '';
        position: absolute;
        inset: -10px;
        background-image: var(--card-bg);
        background-size: cover;
        background-position: center;
        filter: blur(25px) saturate(1.2) brightness(0.6);
        z-index: 0;
    }

    .pclab-img-natural-mob:not(.pclab-img-natural) .card__image img,
    .pclab-img-natural-mob:not(.pclab-img-natural) .hero-card__image img {
        position: relative;
        z-index: 1;
        width: auto !important;
        max-width: 100%;
        height: auto !important;
        max-height: 200px;
        object-fit: contain !important;
        aspect-ratio: auto !important;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    }
}