/* ============================================================
   OUTLINE DIGITAL — MODERN OVERLAY (v5 — performance first)
   PRINCIPIO:
   - Niente filter: blur (devasta la GPU mobile)
   - Niente backdrop-filter pesante (GPU-intensive)
   - Niente animazioni su scroll/hover che causano repaint pesanti
   - Niente transition su proprietà di layout (gap, width, padding)
   - Solo color refresh + transition su transform/opacity (cheap)
   ============================================================ */

:root {
    /* === BRAND === */
    --od-green: #81d742;
    --od-green-hi: #b8ff0c;
    --od-green-deep: #5fa325;
    --od-ink-deepest: #050708;

    /* === GRADIENTS === */
    --od-grad-brand: linear-gradient(135deg, #81d742 0%, #b8ff0c 100%);

    /* === TOKENS === */
    --od-r-pill: 999px;
    --od-r-md: 14px;
    --od-r-lg: 20px;
    --od-ease: cubic-bezier(.2, .7, .15, 1);
}

/* ===== SAFE BASE ============================== */
::selection { background: var(--od-green); color: var(--od-ink-deepest); }

:where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--od-green);
    outline-offset: 3px;
}

/* Scrollbar (solo desktop) */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .04); }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--od-green) 0%, var(--od-green-deep) 100%);
        border-radius: 999px;
    }
}

/* Scroll progress bar (DOM creato da JS, transform-only = composite layer cheap) */
.od-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--od-grad-brand);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
}

/* ===== SLIDER HERO (homepage) — solo color refresh ===== */
.ms-slider--pagination .swiper-pagination-bullet-active {
    background: var(--od-green);
    width: 28px;
    border-radius: 999px;
}

.ms-nav--prev:hover,
.ms-nav--next:hover {
    background: var(--od-green) !important;
    border-color: var(--od-green) !important;
}
.ms-nav--prev:hover .i-arrow path,
.ms-nav--next:hover .i-arrow path { stroke: var(--od-ink-deepest) !important; }

.btn-circle .circle-fill { background: var(--od-grad-brand); }
.btn-circle .circle-outline circle { stroke: var(--od-green); }
.btn-circle .circle-icon path { fill: var(--od-ink-deepest); }

.ms-slider .ms-sc--st {
    color: var(--od-green);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ms-slider .ms-sc--desc {
    color: rgba(245, 247, 240, .94);
}

/* ===== PAGE HERO refresh leggero ===== */
.ms-hero-subtitle {
    color: rgba(245, 247, 240, .95);
}

/* ===== SERVICE SECTIONS — solo refinement statici (no animazioni hover) ===== */

/* Image overlay chip (label statica, niente backdrop-blur) */
.image-overlay {
    background: rgba(5, 7, 8, .75) !important;
    color: var(--od-green) !important;
    border-radius: var(--od-r-pill) !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .76rem !important;
}

/* Service tag pill (chip "Web Design", "E-commerce" ecc.) */
.service-tag {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    padding: 6px 14px !important;
    background: rgba(129, 215, 66, .10) !important;
    border: 1px solid rgba(129, 215, 66, .28) !important;
    border-radius: var(--od-r-pill) !important;
    color: var(--od-green) !important;
    font-weight: 700 !important;
    font-size: .74rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.service-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--od-green);
    border-radius: 50%;
}

/* Benefit tag pill */
.benefit-tag span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 5px 12px;
    background: rgba(129, 215, 66, .08);
    color: var(--od-green);
    border: 1px solid rgba(129, 215, 66, .22);
    border-radius: var(--od-r-pill);
    font-weight: 600;
    font-size: .82rem;
}

/* CTA link refinement (transizione SOLO su transform della freccia, non sul layout) */
.cta-link {
    color: var(--od-green) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.cta-link:hover {
    color: var(--od-green-hi) !important;
}
.cta-link .arrow {
    display: inline-block;
    transition: transform .25s var(--od-ease);
    will-change: transform;
}
.cta-link:hover .arrow {
    transform: translateX(4px);
}

/* Tipografia interna: solo readability, niente proprietà pesanti */
.intro-text p {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}

/* ===== FORM ELEMENTS — submit pill brand, focus glow leggero ===== */
.wpcf7-submit,
input[type="submit"],
button[type="submit"] {
    background: var(--od-grad-brand);
    color: var(--od-ink-deepest);
    border: 0;
    border-radius: var(--od-r-pill);
    padding: 14px 28px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s var(--od-ease);
}
.wpcf7-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.wpcf7-form-control:focus {
    border-color: var(--od-green);
    outline: none;
}

/* ===== COOKIE NOTICE refresh leggero ===== */
.cn-set-cookie.cn-button {
    background: var(--od-grad-brand) !important;
    color: var(--od-ink-deepest) !important;
    border: 0 !important;
    border-radius: var(--od-r-pill) !important;
}

/* ===== COMPONENTI OPT-IN (.od-*) — solo se vorrai usarli ===== */
.od-eyebrow {
    display: inline-block;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--od-green);
    padding: 6px 14px;
    background: rgba(129, 215, 66, .10);
    border: 1px solid rgba(129, 215, 66, .25);
    border-radius: var(--od-r-pill);
}

.od-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 14px 26px;
    font-weight: 700;
    border: 0;
    border-radius: var(--od-r-pill);
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s var(--od-ease);
}
.od-btn--primary {
    background: var(--od-grad-brand);
    color: var(--od-ink-deepest);
}
.od-btn--primary:hover { transform: translateY(-2px); }
.od-btn--ghost {
    background: transparent;
    color: var(--od-green);
    border: 1.5px solid currentColor;
}
.od-btn--ghost:hover {
    background: rgba(129, 215, 66, .08);
}

.od-card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--od-r-lg);
}
[data-theme="light"] .od-card {
    background: #ffffff;
    border-color: rgba(13, 16, 20, .08);
}

.od-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--od-ease), transform .6s var(--od-ease);
}
.od-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .od-scroll-progress { display: none; }
    .od-reveal { opacity: 1; transform: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}