/* =========================================================
   SAI GRAPHIC DESIGNS — SITE-WIDE POLISH
   Preserves the original green/yellow/black hero brand system.
========================================================= */

:root {
    --brand-green: #10b981;
    --brand-green-dark: #059669;
    --brand-green-deep: #047857;
    --brand-green-soft: #ecfdf5;
    --brand-yellow: #ffc400;
    --brand-ink: #111827;
    --brand-copy: #4b5563;
    --brand-line: #e5e7eb;
    --brand-surface: #ffffff;
    --brand-canvas: #f8fafc;
    --brand-radius-sm: 12px;
    --brand-radius: 18px;
    --brand-radius-lg: 26px;
    --brand-shadow-sm: 0 8px 24px rgba(17, 24, 39, .07);
    --brand-shadow: 0 18px 48px rgba(17, 24, 39, .10);
}

/* Global rhythm and readable typography */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    overflow-x: hidden;
    color: var(--brand-ink);
    background: var(--brand-surface);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

main,
section {
    isolation: isolate;
}

section {
    scroll-margin-top: 92px;
}

p {
    color: var(--brand-copy);
}

img {
    max-width: 100%;
}

::selection {
    background: rgba(16, 185, 129, .22);
    color: var(--brand-ink);
}

/* Consistent keyboard and accessibility treatment */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid rgba(16, 185, 129, .38) !important;
    outline-offset: 3px !important;
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.hero-btn,
.cta-button {
    min-height: 44px;
}

/* Premium shared header */
.site-header,
header.header,
header {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid rgba(229, 231, 235, .9) !important;
    box-shadow: 0 8px 30px rgba(17, 24, 39, .045) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header-container,
.nav-container {
    min-height: 84px;
}

.logo,
.brand-logo {
    letter-spacing: -.035em;
}

.nav-link {
    position: relative;
    border-radius: 9px;
    font-weight: 650 !important;
    transition: color .2s ease, background .2s ease !important;
}

.nav-link:hover {
    color: var(--brand-green-dark) !important;
    background: var(--brand-green-soft);
}

.nav-link.active {
    color: var(--brand-green-dark) !important;
}

.cart-icon-btn {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.cart-icon-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, .45) !important;
    box-shadow: var(--brand-shadow-sm);
}

/* Preserve and elevate the existing hero */
.hero,
.hero-section,
.page-hero,
.shop-hero,
.customizer-hero,
.contact-hero,
.about-hero {
    background:
        radial-gradient(circle at 82% 22%, rgba(255, 196, 0, .10), transparent 28%),
        radial-gradient(circle at 10% 15%, rgba(16, 185, 129, .11), transparent 32%),
        linear-gradient(135deg, #fbfffd 0%, #f7fafc 58%, #eefbf6 100%) !important;
}

.hero-content h1,
.page-hero h1,
.shop-hero h1,
.customizer-hero h1,
.contact-hero h1,
.about-hero h1 {
    letter-spacing: -.045em !important;
    line-height: 1.08 !important;
}

.hero-content p,
.page-hero p,
.shop-hero p,
.customizer-hero p,
.contact-hero p,
.about-hero p {
    max-width: 720px;
    line-height: 1.7 !important;
}

.eyebrow,
.section-tag,
.hero-label,
.badge {
    letter-spacing: .075em !important;
    font-weight: 800 !important;
}

/* Shared section hierarchy */
.section-header {
    max-width: 760px;
    margin-inline: auto;
}

.section-title,
.section-header h2 {
    letter-spacing: -.035em !important;
    line-height: 1.15 !important;
}

.section-description,
.section-header p {
    line-height: 1.75 !important;
}

/* Cards: one visual language everywhere */
.service-card,
.product-card,
.feature-card,
.value-card,
.stat-card,
.testimonial-card,
.contact-info-card,
.contact-form-card,
.info-card,
.about-card {
    border: 1px solid var(--brand-line) !important;
    border-radius: var(--brand-radius) !important;
    background: var(--brand-surface) !important;
    box-shadow: 0 7px 22px rgba(17, 24, 39, .045) !important;
    transition:
        transform .25s cubic-bezier(.22, 1, .36, 1),
        border-color .25s ease,
        box-shadow .25s ease !important;
}

.service-card:hover,
.product-card:hover,
.feature-card:hover,
.value-card:hover,
.testimonial-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(16, 185, 129, .40) !important;
    box-shadow: var(--brand-shadow) !important;
}

/* Services */
.service-option {
    border-radius: var(--brand-radius) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.service-option:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, .45) !important;
    box-shadow: var(--brand-shadow-sm) !important;
}

.service-option.active {
    border-color: var(--brand-green) !important;
    background: linear-gradient(145deg, #ffffff, var(--brand-green-soft)) !important;
    box-shadow: 0 12px 32px rgba(16, 185, 129, .13) !important;
}

.add-service-btn {
    border-radius: 11px !important;
    font-weight: 800 !important;
}

/* Shop filters */
.shop-filters,
#shopFilters {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 9px !important;
    margin-top: 16px !important;
}

.shop-filter {
    min-height: 42px !important;
    padding: 9px 17px !important;
    border: 1px solid var(--brand-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--brand-copy) !important;
    font-weight: 750 !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .04) !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
}

.shop-filter:hover {
    transform: translateY(-1px);
    border-color: var(--brand-green) !important;
    color: var(--brand-green-dark) !important;
}

.shop-filter.active {
    border-color: var(--brand-green) !important;
    background: var(--brand-green) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, .22) !important;
}

.products-grid,
#productsGrid {
    align-items: stretch;
}

.product-card {
    overflow: hidden !important;
}

.product-preview {
    overflow: hidden !important;
    background: var(--brand-canvas) !important;
}

.product-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1) !important;
}

.product-card:hover .product-preview img {
    transform: scale(1.035);
}

.product-info {
    display: flex !important;
    height: 100%;
    flex-direction: column;
}

.product-info h3 {
    letter-spacing: -.02em;
}

.product-price-row,
.product-footer {
    margin-top: auto;
}

/* Contact form and trust */
.contact-layout {
    align-items: stretch !important;
}

.contact-info-card,
.contact-form-card {
    padding: clamp(26px, 3vw, 42px) !important;
}

input,
textarea,
select,
.form-control {
    border: 1px solid var(--brand-line) !important;
    border-radius: var(--brand-radius-sm) !important;
    background: #fff !important;
    color: var(--brand-ink) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #cbd5e1 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12) !important;
}

/* Buttons */
.btn-primary,
.primary-btn,
.cta-button,
.submit-btn,
.cart-checkout {
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark)) !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, .22) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.btn-primary:hover,
.primary-btn:hover,
.cta-button:hover,
.submit-btn:hover,
.cart-checkout:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    filter: saturate(1.05);
    box-shadow: 0 14px 30px rgba(16, 185, 129, .29) !important;
}

/* Footer */
.site-footer,
footer {
    background: #0d1724 !important;
}

.site-footer p,
.site-footer a,
footer p,
footer a {
    color: #cbd5e1;
}

.site-footer a:hover,
footer a:hover {
    color: #6ee7b7 !important;
}

/* Responsive refinement */
@media (max-width: 900px) {
    .header-container,
    .nav-container {
        min-height: 72px;
    }

    .hero,
    .hero-section {
        min-height: auto !important;
    }

    .hero-content h1 {
        font-size: clamp(2.35rem, 9vw, 4rem) !important;
    }

    .service-grid,
    .products-grid,
    #productsGrid {
        gap: 18px !important;
    }
}

@media (max-width: 640px) {
    html {
        scroll-padding-top: 76px;
    }

    section {
        scroll-margin-top: 76px;
    }

    .hero,
    .hero-section,
    .page-hero,
    .shop-hero,
    .customizer-hero,
    .contact-hero,
    .about-hero {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .hero-content h1,
    .page-hero h1,
    .shop-hero h1,
    .customizer-hero h1,
    .contact-hero h1,
    .about-hero h1 {
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }

    .shop-filter {
        min-height: 44px !important;
        padding-inline: 15px !important;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 24px 18px !important;
    }

    .service-card,
    .product-card,
    .feature-card,
    .value-card,
    .testimonial-card {
        border-radius: 15px !important;
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Footer brand visibility on dark background */
.site-footer .logo,
footer .logo,
.site-footer .brand-logo,
footer .brand-logo {
    color: #ffffff !important;
}

.site-footer .logo span,
footer .logo span,
.site-footer .brand-logo span,
footer .brand-logo span {
    color: #34d399 !important;
}

.site-footer .logo-icon,
footer .logo-icon {
    border-color: rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
}

.footer-contact {
    font-style: normal;
}

/* Animated dot-border buttons — Sai Graphic Designs */
:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .hero-btn,
    .cta-button,
    .submit-btn,
    .add-service-btn,
    .add-to-cart,
    .add-cart-btn,
    .buy-btn,
    .download-btn,
    .preview-btn,
    .view-btn,
    .cart-checkout,
    .checkout-btn,
    .continue-shopping,
    .shop-filter
) {
    --sai-button-dot: var(--brand-yellow);
    --sai-button-line: rgba(16, 185, 129, .82);
    --sai-button-grid: rgba(16, 185, 129, .13);
    position: relative !important;
    isolation: isolate;
    overflow: visible !important;
    transform-origin: center;
    transition:
        transform .22s cubic-bezier(.22, 1, .36, 1),
        letter-spacing .22s ease,
        box-shadow .22s ease,
        background-color .22s ease,
        border-color .22s ease !important;
}

/* Dotted outline and subtle diagonal grid */
:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .hero-btn,
    .cta-button,
    .submit-btn,
    .add-service-btn,
    .add-to-cart,
    .add-cart-btn,
    .buy-btn,
    .download-btn,
    .preview-btn,
    .view-btn,
    .cart-checkout,
    .checkout-btn,
    .continue-shopping,
    .shop-filter
)::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px dashed var(--sai-button-line);
    border-radius: 16px;
    background-image: repeating-linear-gradient(
        45deg,
        var(--sai-button-grid) 0 1px,
        transparent 1px 5px
    );
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    z-index: -1;
}

/* Four animated brand-yellow corner dots */
:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .hero-btn,
    .cta-button,
    .submit-btn,
    .add-service-btn,
    .add-to-cart,
    .add-cart-btn,
    .buy-btn,
    .download-btn,
    .preview-btn,
    .view-btn,
    .cart-checkout,
    .checkout-btn,
    .continue-shopping,
    .shop-filter
)::after {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 16px;
    background:
        linear-gradient(var(--sai-button-dot), var(--sai-button-dot)) top left / 7px 7px no-repeat,
        linear-gradient(var(--sai-button-dot), var(--sai-button-dot)) top right / 7px 7px no-repeat,
        linear-gradient(var(--sai-button-dot), var(--sai-button-dot)) bottom left / 7px 7px no-repeat,
        linear-gradient(var(--sai-button-dot), var(--sai-button-dot)) bottom right / 7px 7px no-repeat;
    opacity: 0;
    transform: scale(.3) rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .hero-btn,
    .cta-button,
    .submit-btn,
    .add-service-btn,
    .add-to-cart,
    .add-cart-btn,
    .buy-btn,
    .download-btn,
    .preview-btn,
    .view-btn,
    .cart-checkout,
    .checkout-btn,
    .continue-shopping,
    .shop-filter
):is(:hover, :focus-visible):not(:disabled) {
    transform: translateY(-2px) scale(1.025) !important;
    letter-spacing: .025em;
}

:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .hero-btn,
    .cta-button,
    .submit-btn,
    .add-service-btn,
    .add-to-cart,
    .add-cart-btn,
    .buy-btn,
    .download-btn,
    .preview-btn,
    .view-btn,
    .cart-checkout,
    .checkout-btn,
    .continue-shopping,
    .shop-filter
):is(:hover, :focus-visible):not(:disabled)::before {
    animation: sai-dot-border-in .42s cubic-bezier(.22, 1, .36, 1) forwards;
}

:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .hero-btn,
    .cta-button,
    .submit-btn,
    .add-service-btn,
    .add-to-cart,
    .add-cart-btn,
    .buy-btn,
    .download-btn,
    .preview-btn,
    .view-btn,
    .cart-checkout,
    .checkout-btn,
    .continue-shopping,
    .shop-filter
):is(:hover, :focus-visible):not(:disabled)::after {
    animation: sai-corner-dots-in .5s cubic-bezier(.22, 1, .36, 1) .08s forwards;
}

:where(
    .btn,
    .btn-primary,
    .btn-secondary,
    .primary-btn,
    .secondary-btn,
    .hero-btn,
    .cta-button,
    .submit-btn,
    .add-service-btn,
    .add-to-cart,
    .add-cart-btn,
    .buy-btn,
    .download-btn,
    .preview-btn,
    .view-btn,
    .cart-checkout,
    .checkout-btn,
    .continue-shopping,
    .shop-filter
):active:not(:disabled) {
    transform: scale(.98) !important;
    letter-spacing: .01em;
}

@keyframes sai-dot-border-in {
    0% {
        opacity: 0;
        transform: scale(.94);
        clip-path: inset(0 100% 100% 0);
    }
    65% {
        opacity: .45;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        clip-path: inset(0);
    }
}

@keyframes sai-corner-dots-in {
    0% {
        opacity: 0;
        transform: scale(.3) rotate(45deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.25) rotate(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@media (hover: none) {
    :where(
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .hero-btn,
        .cta-button,
        .submit-btn,
        .add-service-btn,
        .add-to-cart,
        .add-cart-btn,
        .buy-btn,
        .download-btn,
        .preview-btn,
        .view-btn,
        .cart-checkout,
        .checkout-btn,
        .continue-shopping,
        .shop-filter
    ):active:not(:disabled)::before,
    :where(
        .btn,
        .btn-primary,
        .btn-secondary,
        .primary-btn,
        .secondary-btn,
        .hero-btn,
        .cta-button,
        .submit-btn,
        .add-service-btn,
        .add-to-cart,
        .add-cart-btn,
        .buy-btn,
        .download-btn,
        .preview-btn,
        .view-btn,
        .cart-checkout,
        .checkout-btn,
        .continue-shopping,
        .shop-filter
    ):active:not(:disabled)::after {
        opacity: 1;
        transform: scale(1);
    }
}


/* Liquid glass navigation dock — Sai Graphic Designs */
@media (min-width: 901px) {
    .main-nav {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 4px !important;
        padding: 7px !important;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 999px;
        background:
            radial-gradient(circle at 18% 15%, rgba(255, 255, 255, .94), transparent 35%),
            linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(236, 253, 245, .58));
        box-shadow:
            0 12px 35px rgba(17, 24, 39, .12),
            inset 0 1px 0 rgba(255, 255, 255, .92),
            inset 0 -1px 0 rgba(16, 185, 129, .10);
        backdrop-filter: blur(20px) saturate(1.35);
        -webkit-backdrop-filter: blur(20px) saturate(1.35);
        isolation: isolate;
    }

    .main-nav::before {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        background:
            radial-gradient(circle at 16% 30%, rgba(255, 196, 0, .15) 0 2px, transparent 3px),
            radial-gradient(circle at 44% 72%, rgba(16, 185, 129, .15) 0 2px, transparent 3px),
            radial-gradient(circle at 78% 24%, rgba(16, 185, 129, .13) 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 92% 68%, rgba(255, 196, 0, .12) 0 1.5px, transparent 2.5px);
        opacity: .85;
        pointer-events: none;
        z-index: -1;
        animation: sai-glass-particles 7s ease-in-out infinite alternate;
    }

    .main-nav .nav-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 10px 17px !important;
        border: 1px solid transparent;
        border-radius: 999px !important;
        color: var(--brand-copy) !important;
        background: transparent;
        transform: translateY(0) scale(1);
        transform-origin: center bottom;
        transition:
            transform .28s cubic-bezier(.22, 1, .36, 1),
            color .22s ease,
            background .22s ease,
            border-color .22s ease,
            box-shadow .22s ease !important;
        white-space: nowrap;
    }

    .main-nav .nav-link:hover,
    .main-nav .nav-link:focus-visible {
        color: var(--brand-green-deep) !important;
        border-color: rgba(16, 185, 129, .25);
        background: rgba(255, 255, 255, .88) !important;
        transform: translateY(6px) scale(1.13);
        box-shadow:
            0 11px 22px rgba(16, 185, 129, .16),
            inset 0 1px 0 #fff;
        z-index: 3;
    }

    /* Nearby items grow slightly, creating the dock proximity effect */
    .main-nav .nav-link:has(+ .nav-link:hover),
    .main-nav .nav-link:hover + .nav-link,
    .main-nav .nav-link:has(+ .nav-link:focus-visible),
    .main-nav .nav-link:focus-visible + .nav-link {
        transform: translateY(3px) scale(1.055);
    }

    .main-nav .nav-link.active {
        color: #064e3b !important;
        border-color: rgba(16, 185, 129, .28) !important;
        background:
            linear-gradient(145deg, rgba(255,255,255,.96), rgba(209,250,229,.82)) !important;
        box-shadow:
            0 7px 18px rgba(16, 185, 129, .14),
            inset 0 1px 0 #fff;
    }

    .main-nav .nav-link.active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 4px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--brand-yellow);
        box-shadow: 0 0 0 3px rgba(255, 196, 0, .14);
        transform: translateX(-50%);
    }
}

@keyframes sai-glass-particles {
    0% {
        transform: translate3d(-2px, 0, 0);
        opacity: .58;
    }
    100% {
        transform: translate3d(3px, 1px, 0);
        opacity: .95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-nav::before {
        animation: none !important;
    }
}