:root {
    --dur-quick: 140ms;
    --dur-snap: 220ms;
    --dur-base: 320ms;
    --dur-slow: 460ms;
    --dur-reveal: 720ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --elevate-1: 0 1px 2px rgba(20, 10, 30, 0.04), 0 2px 4px rgba(20, 10, 30, 0.05);
    --elevate-2: 0 2px 8px rgba(20, 10, 30, 0.06), 0 10px 24px -8px rgba(122, 76, 165, 0.22);
    --elevate-3: 0 8px 20px -6px rgba(122, 76, 165, 0.26), 0 24px 48px -16px rgba(20, 10, 30, 0.18);
}

.shadow-elevate-1 { box-shadow: var(--elevate-1); }
.shadow-elevate-2 { box-shadow: var(--elevate-2); }
.shadow-elevate-3 { box-shadow: var(--elevate-3); }

/* ---------- Header bar ---------- */
.header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-bottom: 1px solid #f3f4f6;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 24px rgba(20, 10, 30, 0.04);
    transition:
        background-color var(--dur-slow) var(--ease-out-expo),
        box-shadow var(--dur-slow) var(--ease-out-expo),
        border-color var(--dur-slow) var(--ease-out-expo),
        backdrop-filter var(--dur-slow) var(--ease-out-expo);
}

/* Off the top of the page the bar tightens and its shadow deepens. Open, the
   mobile menu is tall enough that the page underneath would ghost through its
   links, so the bar goes opaque. */
.header-bar[data-scrolled='true']:not([data-menu-open='true']) {
    border-bottom-color: #ece7f2;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(20, 10, 30, 0.08);
}

.header-bar[data-menu-open='true'] {
    border-bottom-color: #f3f4f6;
    background-color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(20, 10, 30, 0.10);
}

/* Dims the page under the open mobile menu and catches the tap that closes it.
   Visibility transitions with the fade, so it keeps catching taps until gone. */
.header-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: rgba(20, 10, 30, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out-quart), visibility var(--dur-base) var(--ease-out-quart);
}
.header-backdrop[data-open='true'] {
    opacity: 1;
    visibility: visible;
}
@media (min-width: 768px) {
    .header-backdrop { display: none; }
}

.header-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 16px 24px;
    transition: padding var(--dur-slow) var(--ease-out-expo);
}
[data-scrolled='true']:not([data-menu-open='true']) .header-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}
@media (min-width: 768px) { .header-inner { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 1024px) { .header-inner { padding-left: 96px; padding-right: 96px; } }

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    transition: opacity var(--dur-snap) ease;
}
.header-logo-link:hover { opacity: 0.8; }

/* Scaled rather than resized: a transform keeps the shrink off the layout path,
   so the bar's height animates on its own. */
.header-logo-box {
    position: relative;
    flex-shrink: 0;
    height: 40px;
    width: 160px;
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out-expo);
}
[data-scrolled='true']:not([data-menu-open='true']) .header-logo-box {
    transform: scale(0.92);
}

.header-logo {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
}

/* ---------- Desktop nav ---------- */
.header-nav {
    display: none;
    align-items: center;
    gap: 24px;
}
@media (min-width: 768px) {
    .header-nav { display: flex; }
}

.header-nav-link {
    border-radius: 4px;
    font-size: 18px;
    color: #545454;
    text-decoration: none;
}
.header-nav-link:hover { color: #7a4ca5; }
@media (min-width: 768px) {
    .header-nav-link { font-size: 20px; }
}

.header-dropdown { position: relative; }

.header-lang-button {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    border: 1px solid #d8d8d8;
    background-color: #ffffff;
    padding: 8px 12px;
    cursor: pointer;
    transition: border-color var(--dur-snap) var(--ease-out-quart);
}
.header-lang-button:hover { border-color: #7a4ca5; }

.header-lang-label {
    font-size: 16px;
    color: #0c0c0c;
}

.header-lang-panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    min-width: 160px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #d8d8d8;
    background-color: #ffffff;
}

.header-lang-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    color: #0c0c0c;
    transition: background-color var(--dur-snap) var(--ease-out-quart);
}
.header-lang-option:hover { background-color: #f6f2fa; }
.header-lang-option-active { color: #7a4ca5; }

/* ---------- Mobile menu button ---------- */
.header-menu-button {
    position: relative;
    display: flex;
    border-radius: 8px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #0c0c0c;
    transition: background-color var(--dur-snap) var(--ease-out-quart), transform var(--dur-quick) var(--ease-out-quart);
}
.header-menu-button:hover { background-color: #f3f4f6; }
.header-menu-button:active { transform: scale(0.9); }
@media (min-width: 768px) {
    .header-menu-button { display: none; }
}

.header-lang-button svg {
    width: 16px;
    height: 16px;
    color: #b2b2b2;
}

/* Both glyphs stay mounted and cross-fade through a quarter turn - swapping them
   outright makes the button flicker on every tap. */
.header-menu-glyphs {
    position: relative;
    display: block;
    height: 24px;
    width: 24px;
}

.header-menu-glyph {
    position: absolute;
    inset: 0;
    display: block;
    transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}

.header-menu-button svg {
    width: 24px;
    height: 24px;
    display: block;
}

.header-menu-glyph-bars { opacity: 1; transform: none; }
.header-menu-glyph-close { opacity: 0; transform: rotate(-90deg) scale(0.75); }
[data-menu-open='true'] .header-menu-glyph-bars { opacity: 0; transform: rotate(90deg) scale(0.75); }
[data-menu-open='true'] .header-menu-glyph-close { opacity: 1; transform: none; }

/* ---------- Mobile menu panel ---------- */
@media (min-width: 768px) {
    .header-mobile-menu { display: none; }
}

/* The page behind is locked, so on a short screen the menu scrolls on its own. */
.header-mobile-inner {
    margin-top: 24px;
    max-height: calc(100svh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid #f3f4f6;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.header-mobile-link {
    display: block;
    padding: 8px 0;
    font-size: 20px;
    color: #545454;
    text-decoration: none;
}
.header-mobile-link:hover { color: #7a4ca5; }

.header-mobile-languages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #f3f4f6;
    padding-top: 8px;
}

.header-mobile-lang-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    padding: 8px 16px;
    color: #0c0c0c;
    text-decoration: none;
    transition: background-color var(--dur-snap) var(--ease-out-quart);
}
.header-mobile-lang-option:hover { background-color: #f6f2fa; }
.header-mobile-lang-option:active { background-color: #efe8f6; }
.header-mobile-lang-option-active { color: #7a4ca5; }

/* Mobile menu links trail the panel opening. */
.menu-item {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    transition:
        opacity var(--dur-base) var(--ease-out-quart) var(--reveal-delay, 0ms),
        transform var(--dur-base) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-open='true'] .menu-item {
    opacity: 1;
    transform: none;
}

/* ---------- shared interaction primitives (also used by Stylizations/Footer) ---------- */
.hover-lift-sm,
.btn-modern,
.icon-pop,
.badge-press {
    transition:
        transform var(--dur-base) var(--ease-out-expo),
        box-shadow var(--dur-base) var(--ease-out-expo),
        background-color var(--dur-snap) var(--ease-out-quart),
        opacity var(--dur-snap) var(--ease-out-quart);
}
@media (hover: hover) {
    .hover-lift-sm:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: var(--elevate-2);
    }
    .btn-modern:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: var(--elevate-3);
    }
    .icon-pop:hover {
        transform: translate3d(0, -3px, 0) scale(1.07);
        box-shadow: var(--elevate-2);
    }
    .badge-press:hover {
        transform: translate3d(0, -2px, 0);
        opacity: 0.92;
    }
}
.hover-lift-sm:active,
.btn-modern:active,
.icon-pop:active,
.badge-press:active {
    transform: scale(0.975);
    transition-duration: var(--dur-quick);
}

/* --- store badges (shared: header download panel + footer) --- */
.badge-press {
    display: inline-flex;
    align-items: center;
    flex: none;
    border-radius: 8px;
}
.badge-press:focus-visible {
    outline: 2px solid #7a4ca5;
    outline-offset: 4px;
}
.badge-press img {
    height: 100%;
    width: auto;
    display: block;
}

/* Apple's artwork is narrower than Google's at the same height, so it runs ~8%
   taller to even out their visual weight. */
.app-store-badge { height: 2.7rem; }
.google-play-badge { height: 2.5rem; }
@media (min-width: 640px) {
    .app-store-badge { height: 3.25rem; }
    .google-play-badge { height: 3rem; }
}

.link-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 2px;
    transition:
        background-size var(--dur-base) var(--ease-out-expo),
        color var(--dur-snap) var(--ease-out-quart);
    text-decoration: none;
}
@media (hover: hover) {
    .link-underline:hover { background-size: 100% 1px; }
}
.link-underline:focus-visible { background-size: 100% 1px; }

.focus-ring:focus-visible {
    outline: 2px solid #7a4ca5;
    outline-offset: 3px;
    border-radius: inherit;
}

.menu-pop {
    transform-origin: top right;
    transition:
        opacity var(--dur-snap) var(--ease-out-quart),
        transform var(--dur-snap) var(--ease-out-expo),
        visibility 0s;
}
.menu-pop[data-state='closed'] {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    visibility: hidden;
    transition-delay: 0s, 0s, var(--dur-snap);
}
.menu-pop[data-state='open'] {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* --- scroll entrances ---
 * Ported from the Website's useScrollReveal/index.css: `.reveal-item` is the
 * per-child move inside a `.reveal-group`; `.reveal` is the same move for a
 * single element. Gated on html.js so a reader without JavaScript just sees
 * the content, never a page stuck at opacity 0.
 */
:where(html.js) .reveal,
:where(html.js) .reveal-item {
    opacity: 0;
    transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 18px), 0) scale(var(--reveal-scale, 1));
    transition:
        opacity var(--dur-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms),
        transform var(--dur-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
.reveal.is-visible,
.reveal-group.is-visible .reveal-item {
    opacity: 1;
    transform: none;
}
.reveal-section { --reveal-y: 24px; }

/* --- guide card (shared: stylizacje hub + style category pages) --- */
.guide-card {
    display: flex;
    height: 100%;
    gap: 16px;
    border-radius: 24px;
    border: 1px solid #ece8f1;
    background-color: #ffffff;
    padding: 12px;
    text-decoration: none;
    box-shadow: var(--elevate-1);
}
@media (min-width: 768px) {
    .guide-card { flex-direction: column; gap: 0; padding: 0; }
}

.guide-card-image-wrap {
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 18px;
    background-color: #f1f0f5;
}
@media (min-width: 768px) {
    .guide-card-image-wrap { width: 100%; aspect-ratio: auto; height: 176px; border-radius: 24px 24px 0 0; }
}

.guide-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 500ms ease;
}
.guide-card:hover .guide-card-image { transform: scale(1.03); }

.guide-card-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: 4px 0;
}
@media (min-width: 768px) {
    .guide-card-body { padding: 20px; }
}

.guide-card-label {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #7a4ca5;
}
@media (min-width: 768px) {
    .guide-card-label { font-size: 14px; }
}

.guide-card-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    color: #0c0c0c;
}
@media (min-width: 768px) {
    .guide-card-title { font-size: 18px; }
}

.guide-card-excerpt {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #545454;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guide-card-read {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #7a4ca5;
}
.guide-card-read svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dur-base) var(--ease-out-expo);
}
.guide-card:hover .guide-card-read svg { transform: translateX(4px); }

/* --- expand / collapse (accordion primitive: FAQ answers etc.) ---
 * `0fr -> 1fr` animates to the row's real content height, so an answer of any
 * length opens/closes at the same speed without a max-height guess.
 */
.collapse-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out-expo);
}
.collapse-grid[data-open='true'] {
    grid-template-rows: 1fr;
}
.collapse-grid > .collapse-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity var(--dur-snap) var(--ease-out-quart),
        transform var(--dur-snap) var(--ease-out-quart),
        visibility 0s linear var(--dur-slow);
    visibility: hidden;
}
.collapse-grid[data-open='true'] > .collapse-inner {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
        opacity var(--dur-base) var(--ease-out-quart) 90ms,
        transform var(--dur-base) var(--ease-out-quart) 90ms,
        visibility 0s;
}

/* --- app download CTA (shared: stylizacje hub + style category pages) --- */
.style-cta-section {
    background-color: #ffffff;
    padding: 56px 24px;
}
@media (min-width: 768px) {
    .style-cta-section { padding: 96px 48px; }
}
@media (min-width: 1024px) {
    .style-cta-section { padding-left: 96px; padding-right: 96px; }
}

.style-cta-inner {
    max-width: 64rem;
    margin: 0 auto;
}

.style-cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    background: linear-gradient(to bottom right, #7a4ca5, #8b65ae);
    padding: 56px 24px;
    text-align: center;
    box-shadow: var(--elevate-2);
}
@media (min-width: 768px) {
    .style-cta-card { padding: 80px 64px; }
}

.style-cta-glow {
    pointer-events: none;
    position: absolute;
    height: 288px;
    width: 288px;
    border-radius: 9999px;
    filter: blur(64px);
}
.style-cta-glow-1 { right: -80px; top: -96px; background-color: rgba(255, 255, 255, 0.1); }
.style-cta-glow-2 { left: -80px; bottom: -96px; background-color: rgba(255, 255, 255, 0.07); }

.style-cta-content { position: relative; }

.style-cta-title {
    max-width: 48rem;
    margin: 0 auto;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.25;
    color: #ffffff;
}
@media (min-width: 768px) {
    .style-cta-title { font-size: 36px; }
}
@media (min-width: 1024px) {
    .style-cta-title { font-size: 48px; }
}

.style-cta-desc {
    max-width: 36rem;
    margin: 20px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 768px) {
    .style-cta-desc { font-size: 18px; }
}

/* The badge row is shared with the footer; in this card it only needs the gap
   above it. */
.style-cta-card .style-cta-badges { margin-top: 36px; }

/* --- guides section (shared: stylizacje hub + style category pages) --- */
.guides-section,
.brands-section {
    padding: 48px 24px;
}
@media (min-width: 768px) {
    .guides-section,
    .brands-section { padding: 70px 48px; }
}
@media (min-width: 1024px) {
    .guides-section,
    .brands-section { padding-left: 96px; padding-right: 96px; }
}
.guides-section-alt { background-color: #f9f9f9; }

.guides-section-inner,
.brands-section-inner {
    max-width: 72rem;
    margin: 0 auto;
}

.guides-section-header {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
@media (min-width: 768px) {
    .guides-section-header { margin-bottom: 32px; }
}

.guides-section-heading {
    font-size: 24px;
    font-weight: 500;
    color: #0c0c0c;
}
@media (min-width: 768px) {
    .guides-section-heading { font-size: 30px; }
}

.guides-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #7a4ca5;
    text-decoration: none;
    transition: color var(--dur-snap) var(--ease-out-quart);
}
.guides-all-link:hover { color: #5e3a80; }
.guides-all-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dur-base) var(--ease-out-expo);
}
.guides-all-link:hover svg { transform: translateX(2px); }

.guides-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .guides-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
    .guides-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Reduced motion
   Nothing here disables feedback - hover and press still change the element,
   they just stop travelling. Entrances resolve to their finished state so no
   content can be left invisible behind an animation that never runs.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-item,
    .reveal-group.is-visible .reveal-item {
        opacity: 1 !important;
        transform: none !important;
    }

    .reveal,
    .reveal-item,
    .collapse-grid,
    .collapse-grid > .collapse-inner,
    .menu-pop,
    .menu-item,
    .header-backdrop,
    .header-logo-box,
    .header-menu-glyph {
        transition: none !important;
    }

    .menu-item {
        opacity: 1;
        transform: none;
    }

    .hover-lift-sm,
    .btn-modern,
    .icon-pop,
    .badge-press,
    .link-underline {
        transition-property: box-shadow, background-color, opacity, color, background-size;
        transition-duration: var(--dur-snap);
    }

    .hover-lift-sm:hover,
    .btn-modern:hover,
    .icon-pop:hover,
    .badge-press:hover,
    .hover-lift-sm:active,
    .btn-modern:active,
    .icon-pop:active,
    .badge-press:active {
        transform: none;
    }
}