/* ============================================================
   KOINO site-wide polish layer
   Loaded after page CSS to add a consistent modern finish.
   ============================================================ */

:root {
    --koino-radius-sm: 12px;
    --koino-radius-md: 18px;
    --koino-radius-lg: 28px;
    --koino-shadow-soft: 0 14px 36px rgba(6, 20, 110, 0.08);
    --koino-shadow-hover: 0 22px 60px rgba(6, 20, 110, 0.14);
}

html {
    scroll-padding-top: 96px;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(6, 20, 110, 0.14);
    color: inherit;
}

:where(h1, h2, h3, h4, h5, h6) {
    letter-spacing: -0.04em;
    line-height: 1.08;
    text-wrap: balance;
}

:where(p, li, td, dd) {
    text-wrap: pretty;
}

:where(a, button, input, select, textarea) {
    font: inherit;
}

:where(img, video, svg, canvas) {
    max-width: 100%;
    height: auto;
}

:where(section, .section) {
    scroll-margin-top: 96px;
}

:where(.card, [class$="-card"], [class*=" card"], [class*="-card"], .tile, .panel, .box, .tier, .sol, .step, .wyg, .faq-item, .o-card, .v-card, .pain-card, .proof-card, .content-card, .result-card, .report-card, .feature-card, .stat-callout) {
    border-radius: var(--koino-radius-md);
    box-shadow: var(--koino-shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

:where(.card, [class$="-card"], [class*=" card"], [class*="-card"], .tile, .panel, .box, .tier, .sol, .step, .wyg, .faq-item, .o-card, .v-card, .pain-card, .proof-card, .content-card, .result-card, .report-card, .feature-card, .stat-callout):hover {
    box-shadow: var(--koino-shadow-hover);
    transform: translateY(-2px);
}

:where(.btn, .btn-p, .btn-s, .btn-primary, .btn-secondary, .btn-outline, .nav-cta, .cta-btn, .tier-btn, .sys-btn, .qw-btn, .mobile-menu a, .mobile-cta-bar a, .mobile-bar .btn) {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

:where(.btn, .btn-p, .btn-s, .btn-primary, .btn-secondary, .btn-outline, .nav-cta, .cta-btn, .tier-btn, .sys-btn, .qw-btn, .mobile-menu a, .mobile-cta-bar a, .mobile-bar .btn):hover {
    transform: translateY(-1px);
}

:where(input, select, textarea) {
    border-radius: var(--koino-radius-sm);
}

:where(input, select, textarea):focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 20, 110, 0.10);
}

:where(table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: var(--koino-radius-md);
}

:where(th, td) {
    padding: 14px 16px;
}

:where(.mobile-cta-bar, .mobile-bar) {
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.16);
}

:where(footer a) {
    transition: color 0.18s ease, opacity 0.18s ease;
}

:where(footer a:hover) {
    opacity: 0.9;
}

@media (max-width: 768px) {
    :where(.c, .wrap, .container) {
        padding-left: 20px;
        padding-right: 20px;
    }

    :where(section, .section) {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}