/* Shared navigation and footer styles for inner pages */

:root {
    --uc-bg: #faf8f5;
    --uc-surface: #fff;
    --uc-text: #2c2c2c;
    --uc-muted: #6f675f;
    --uc-line: #e8ded5;
    --uc-line-strong: #d8c8bb;
    --uc-accent: #c17f59;
    --uc-accent-dark: #a86b48;
    --uc-footer: #1f1b18;
    --uc-radius: 10px;
    --uc-shadow-soft: 0 16px 42px rgba(77, 55, 38, 0.08);
    --uc-shadow-lift: 0 24px 62px rgba(77, 55, 38, 0.14);
    --uc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    background: var(--uc-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(250,248,245,0.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--uc-line);
    box-shadow: none;
}

.header-inner {
    max-width: 1180px;
    min-height: 68px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--uc-text);
    text-decoration: none;
    flex-shrink: 0;
}

.header-logo .logo-img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.header-logo .logo-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.04rem;
    color: #1a1a1a;
    font-size: 0.82rem;
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: 0.09em;
    white-space: nowrap;
}

.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--uc-line-strong);
    border-radius: 999px;
    color: var(--uc-accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    background: var(--uc-surface);
}

.logo-text {
    color: var(--uc-text);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}

.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex: 1;
}

.site-header .nav-link {
    position: relative;
    padding: 0.4rem 0;
    color: var(--uc-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--uc-accent);
}

.site-header .nav-link:hover {
    transform: translateY(-1px);
}

.site-header .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--uc-accent);
    border-radius: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.uc-mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--uc-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--uc-ink);
    cursor: pointer;
}

.uc-mobile-menu-toggle span,
.uc-mobile-menu-toggle::before,
.uc-mobile-menu-toggle::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.uc-mobile-menu-toggle[aria-expanded="true"] span {
    opacity: 0;
}

.uc-mobile-menu-toggle[aria-expanded="true"]::before {
    transform: translateY(6px) rotate(45deg);
}

.uc-mobile-menu-toggle[aria-expanded="true"]::after {
    transform: translateY(-6px) rotate(-45deg);
}

.uc-mobile-menu {
    position: fixed;
    top: 76px;
    left: 1rem;
    right: 1rem;
    z-index: 1200;
    display: none;
    padding: 0.65rem;
    border: 1px solid var(--uc-line);
    border-radius: 12px;
    background: rgba(255, 250, 245, 0.98);
    box-shadow: 0 20px 52px rgba(36, 31, 27, 0.18);
}

.uc-mobile-menu.is-open {
    display: grid;
    gap: 0.35rem;
}

.uc-mobile-menu a {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.9rem;
    border-radius: 8px;
    color: var(--uc-ink);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
}

.uc-mobile-menu a:hover,
.uc-mobile-menu a:focus-visible {
    background: #fbf5ef;
    color: var(--uc-accent);
}

.uc-mobile-menu .uc-mobile-menu-primary {
    background: var(--uc-accent);
    color: #fff;
}

.uc-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    display: none;
    background: rgba(36, 31, 27, 0.18);
}

.uc-mobile-menu-backdrop.is-open {
    display: block;
}

.translate-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 0.9rem;
    border: 1px solid var(--uc-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--uc-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.translate-link:hover {
    transform: translateY(-1px);
    border-color: var(--uc-accent);
    color: var(--uc-accent);
}

.header-actions .btn,
.header-actions .btn-primary,
.header-actions .btn-outline,
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-quote,
.btn-detail,
.btn-sm,
.read-link,
.card-read,
.topic-card-link,
.card-actions,
.submit-btn,
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.header-actions .btn,
.header-actions .btn-primary,
.header-actions .btn-outline {
    min-height: 42px;
    padding: 0 1.25rem;
    border: 1px solid var(--uc-accent);
    border-radius: 999px;
    background: var(--uc-accent);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
}

.btn::after,
.btn-primary::after,
.btn-secondary::after,
.btn-outline::after,
.btn-quote::after,
.btn-detail::after,
.btn-sm::after,
.submit-btn::after,
button[type="submit"]::after {
    content: "";
    position: absolute;
    inset: -45% -80%;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.26) 50%, transparent 65%);
    transform: translateX(-74%) skewX(-18deg);
    transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.btn:hover::after,
.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-outline:hover::after,
.btn-quote:hover::after,
.btn-detail:hover::after,
.btn-sm:hover::after,
.submit-btn:hover::after,
button[type="submit"]:hover::after {
    transform: translateX(74%) skewX(-18deg);
}

.header-actions .btn:hover,
.header-actions .btn-primary:hover,
.header-actions .btn-outline:hover {
    transform: translateY(-1px);
    background: var(--uc-accent-dark);
    border-color: var(--uc-accent-dark);
    color: #fff;
}

:is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(193, 127, 89, 0.34);
    outline-offset: 4px;
}

.site-footer {
    background: var(--uc-footer);
    padding: 3rem 2rem 2rem;
    border-top: none;
}

/* Shared layout polish */
.page-banner,
.blog-hero,
.topic-hero,
.article-hero,
.contact-hero,
.tool-hero,
.review-hero {
    overflow: hidden;
}

.page-banner {
    min-height: 148px;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 85% 16%, rgba(193, 127, 89, 0.12), transparent 30%),
        linear-gradient(180deg, #f3eee7 0%, #faf8f5 100%) !important;
}

.page-banner .banner-content {
    width: min(1180px, 100%);
    margin: 0 auto;
    text-align: left !important;
}

.page-banner .banner-title {
    max-width: 780px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.page-banner .banner-subtitle {
    margin: 0 !important;
    max-width: 680px !important;
    line-height: 1.65 !important;
}

.filter-box,
.product-card,
.post-card,
.topic-card,
.article-card,
.related-card,
.info-card,
.service-card,
.why-card,
.process-card,
.summary-card,
.note-item,
.faq-item,
.tool-card,
.download-card {
    border-radius: var(--uc-radius) !important;
}

.filter-box,
.post-card,
.topic-card,
.product-card {
    box-shadow: var(--uc-shadow-soft) !important;
}

.filter-link,
.filter-sub-link {
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.filter-link:hover,
.filter-sub-link:hover {
    transform: translateX(2px);
}

.products-header,
.section-head,
.article-group-head {
    border-bottom-color: rgba(193,127,89,0.14) !important;
}

.post-label,
.products-title-hint,
.eyebrow {
    letter-spacing: 0.12em !important;
}

.footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 2rem;
}

.footer-col h4 {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 1rem;
}

.footer-col p,
.footer-col a {
    display: block;
    color: rgba(255,255,255,0.58);
    font-size: 0.82rem;
    line-height: 1.85;
    text-decoration: none;
}

.footer-col a:hover {
    color: #f0b184;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.48rem;
    margin-top: 0.9rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    background: rgba(255,255,255,0.045);
    color: rgba(255,255,255,0.82);
    font-size: 0;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.footer-social a::before {
    content: "";
    width: 1.08rem;
    height: 1.08rem;
    background: currentColor;
    -webkit-mask: var(--social-icon) center / contain no-repeat;
    mask: var(--social-icon) center / contain no-repeat;
}

.footer-social a[aria-label="Facebook"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1 8.5V6.7c0-.9.2-1.4 1.5-1.4H18V1.5c-.4-.1-1.9-.2-3.6-.2-3.6 0-6 2.2-6 6.1v1.1H4.5v4.3h3.9v9.9h4.8v-9.9h3.9l.6-4.3h-4.6Z'/%3E%3C/svg%3E"); }
.footer-social a[aria-label="X"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9 10.5 21.3 2h-1.8l-6.4 7.4L8 2H2.1l7.8 11.3L2.1 22h1.8l6.8-7.8L16.1 22H22l-8.1-11.5Zm-2.4 2.8-.8-1.1L4.5 3.4h2.7l5 7.1.8 1.1 6.6 9.3h-2.7l-5.4-7.6Z'/%3E%3C/svg%3E"); }
.footer-social a[aria-label="LinkedIn"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3.6A2.6 2.6 0 1 1 5 8.8 2.6 2.6 0 0 1 5 3.6ZM2.8 10.4h4.4v10.9H2.8V10.4Zm6.4 0h4.2v1.5h.1c.6-1 1.9-2 4-2 4.3 0 5.1 2.8 5.1 6.5v4.9h-4.4v-4.4c0-1.1 0-2.5-1.5-2.5s-1.8 1.2-1.8 2.4v4.5H9.2V10.4Z'/%3E%3C/svg%3E"); }
.footer-social a[aria-label="YouTube"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 7.2s-.2-1.7-.9-2.4c-.9-.9-1.9-.9-2.4-1C16.4 3.5 12 3.5 12 3.5s-4.4 0-7.7.3c-.5.1-1.5.1-2.4 1C1.2 5.5 1 7.2 1 7.2S.8 9.2.8 11.2v1.9c0 2 .2 4 .2 4s.2 1.7.9 2.4c.9.9 2.1.9 2.6 1 1.9.2 7.5.3 7.5.3s4.4 0 7.7-.3c.5-.1 1.5-.1 2.4-1 .7-.7.9-2.4.9-2.4s.2-2 .2-4v-1.9c0-2-.2-4-.2-4ZM9.7 15.2V8.3l6.3 3.5-6.3 3.4Z'/%3E%3C/svg%3E"); }
.footer-social a[aria-label="TikTok"] { --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.7 2c.4 3 2.1 4.8 5.1 5v4.1c-1.7.2-3.2-.4-5-1.4v6.7c0 8.5-9.3 11.2-13.1 5.1-2.5-4-.9-10.9 7-11.2v4.3c-.6.1-1.2.2-1.8.4-1.7.6-2.7 1.8-2.4 3.9.5 3.8 7.4 4.9 6.8-2.5V2h3.4Z'/%3E%3C/svg%3E"); }

.footer-social a[aria-label="Facebook"]:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.footer-social a[aria-label="X"]:hover { background: #fff; border-color: #fff; color: #111; }
.footer-social a[aria-label="LinkedIn"]:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.footer-social a[aria-label="YouTube"]:hover { background: #ff0033; border-color: #ff0033; color: #fff; }
.footer-social a[aria-label="TikTok"]:hover { background: #25f4ee; border-color: #25f4ee; color: #111; }

.footer-social a:hover {
    transform: translateY(-2px);
}

.footer-social a:hover {
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.footer-bottom {
    max-width: 1180px;
    margin: 1.8rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.36);
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 900px) {
    .header-nav {
        display: none;
    }

    .uc-mobile-menu-toggle {
        display: inline-flex;
    }

    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .header-inner {
        padding: 0 1rem;
    }

    .header-actions {
        display: none;
    }

    .logo-text {
        font-size: 0.95rem;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .reveal,
    .motion-card {
        transition-duration: 0.32s !important;
        transition-delay: 0ms !important;
    }
}

/* Shared motion */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.74s cubic-bezier(0.22, 1, 0.36, 1), transform 0.74s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.motion-card {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.motion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(77,55,38,0.12);
}

.motion-card img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-card:hover img {
    transform: scale(1.045);
}

.motion-card:active {
    transform: translateY(-2px) scale(0.992);
}

.page-banner,
.blog-hero,
.topic-hero,
.article-hero,
.contact-hero,
.tool-hero,
.review-hero {
    position: relative;
    isolation: isolate;
}

.page-banner::after,
.blog-hero::after,
.topic-hero::after,
.article-hero::after,
.contact-hero::after,
.tool-hero::after,
.review-hero::after {
    content: "";
    position: absolute;
    inset: auto 10% -70px auto;
    width: min(360px, 52vw);
    height: 140px;
    border-radius: 999px;
    background: rgba(193, 127, 89, 0.08);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after,
    .reveal,
    .motion-card,
    .motion-card img {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

@media (max-width: 600px) {
    .reveal,
    .motion-card {
        transition-duration: 0.32s !important;
        transition-delay: 0ms !important;
    }
}

/* Contact is a conversion form, so keep it instant instead of cinematic. */
body.contact-page .site-header,
body.contact-page .info-card,
body.contact-page .contact-form {
    backdrop-filter: none;
}

body.contact-page .site-header {
    background: rgba(250, 248, 245, 0.98);
}

body.contact-page .page-banner::after {
    display: none;
}

body.contact-page .reveal,
body.contact-page .motion-card,
body.contact-page .motion-card img {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
    will-change: auto;
}

body.contact-page .reveal {
    transition: none;
}

body.contact-page *,
body.contact-page *::before,
body.contact-page *::after {
    box-sizing: border-box;
}

@media (max-width: 600px) {
    body.contact-page {
        overflow-x: hidden;
    }

    body.contact-page .page-banner {
        display: block;
        min-height: auto;
    }

    body.contact-page .page-banner .banner-content {
        width: calc(100% - 2.5rem) !important;
        max-width: calc(100% - 2.5rem) !important;
        margin: 0 1.25rem;
        padding: 1.35rem 0 1.25rem;
    }

    body.contact-page .banner-subtitle,
    body.contact-page .mobile-contact-actions,
    body.contact-page .mobile-contact-actions a {
        width: 100%;
        max-width: 100% !important;
    }
}