:root {
 --color-brand-primary: #2563eb;
 --color-brand-primary-rgb: 37, 99, 235;
 --color-brand-primary-hover: #1d4ed8;
 --color-brand-primary-active: #1e40af;
 --color-brand-secondary: #0f172a;
 --color-brand-secondary-rgb: 15, 23, 42;
 --color-brand-accent: #059669;
 --color-brand-accent-rgb: 5, 150, 105;
 --color-brand-dark: var(--color-surface-inverse-secondary);
 --color-brand-primary-light: var(--color-info-light);
 --color-accent-sky: #38bdf8;
 --color-accent-sky-rgb: 56, 189, 248;
 --color-accent-violet: #7c3aed;
 --color-accent-violet-rgb: 124, 58, 237;
 --color-accent-violet-light: rgba(124, 58, 237, 0.1);
 --color-accent-purple: #8b5cf6;
 --color-accent-amber: #d97706;
 --color-accent-amber-rgb: 217, 119, 6;
 --color-accent-amber-light: rgba(217, 119, 6, 0.1);
 --color-accent-cyan: #0891b2;
 --color-accent-cyan-rgb: 8, 145, 178;
 --color-accent-cyan-light: rgba(8, 145, 178, 0.1);
 --color-surface-primary: #ffffff;
 --color-surface-secondary: #f8fafc;
 --color-surface-tertiary: #f1f5f9;
 --color-surface-elevated: #ffffff;
 --color-surface-inverse: #0f172a;
 --color-surface-inverse-secondary: #1e293b;
 --color-bg-surface: var(--color-surface-secondary);
 --color-bg-card: var(--color-surface-primary);
 --color-text-primary: #0f172a;
 --color-text-secondary: #475569;
 --color-text-tertiary: #64748b; 
 --color-text-inverse: #ffffff;
 --color-text-inverse-muted: #94a3b8; 
 --color-text-inverse-subtle: #cbd5e1; 
 --color-text-link: var(--color-brand-primary);
 --color-text-link-hover: var(--color-brand-primary-hover);
 --color-border-default: #e2e8f0;
 --color-border-subtle: #f1f5f9;
 --color-border-strong: #cbd5e1;
 --color-border-hover: var(--color-border-strong);
 --color-border-card: rgba(15, 23, 42, 0.08);
 --color-border-card-hover: rgba(37, 99, 235, 0.25);
 --color-border-hairline: rgba(15, 23, 42, 0.05);
 --color-border-dark-subtle: rgba(255, 255, 255, 0.08);
 --color-border-dark-strong: rgba(255, 255, 255, 0.16);
 --color-success: #047857;
 --color-success-rgb: 4, 120, 87;
 --color-success-light: #d1fae5;
 --color-warning: #d97706;
 --color-warning-rgb: 217, 119, 6;
 --color-warning-light: #fef3c7;
 --color-warning-dark: #92400e;
 --color-error: #dc2626;
 --color-error-rgb: 220, 38, 38;
 --color-error-light: #fee2e2;
 --color-error-dark: #b91c1c;
 --color-danger: var(--color-error);
 --color-danger-rgb: var(--color-error-rgb);
 --color-danger-light: var(--color-error-light);
 --color-danger-dark: var(--color-error-dark);
 --color-info: #2563eb;
 --color-info-rgb: 37, 99, 235;
 --color-info-light: #dbeafe;
 --gradient-brand: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
 --gradient-brand-reverse: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
 --gradient-surface: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
 --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 --gradient-glow: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
 --font-sans: 'Inter', 'Inter-Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 --font-body: var(--font-sans);
 --font-display: 'Plus Jakarta Sans', var(--font-sans);
 --font-mono: ui-monospace, 'SF Mono', Monaco, 'Andale Mono', monospace;
 --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
 --text-sm: clamp(0.8125rem, 0.775rem + 0.1875vw, 0.875rem);
 --text-base: clamp(0.9375rem, 0.9rem + 0.1875vw, 1rem);
 --text-lg: clamp(1.0625rem, 1rem + 0.3125vw, 1.125rem);
 --text-xl: clamp(1.1875rem, 1.1rem + 0.4375vw, 1.25rem);
 --text-2xl: clamp(1.4375rem, 1.3rem + 0.6875vw, 1.5rem);
 --text-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 1.875rem);
 --text-4xl: clamp(2.125rem, 1.75rem + 1.875vw, 2.25rem);
 --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 3rem);
 --text-6xl: clamp(3.5rem, 2.5rem + 5vw, 3.75rem);
 --weight-regular: 400;
 --weight-normal: var(--weight-regular);
 --weight-medium: 500;
 --weight-semibold: 600;
 --weight-bold: 700;
 --weight-extrabold: 800;
 --leading-none: 1;
 --leading-tight: 1.15;
 --leading-snug: 1.3;
 --leading-normal: 1.5;
 --leading-relaxed: 1.65;
 --leading-loose: 2;
 --tracking-tight: -0.025em;
 --tracking-normal: 0;
 --tracking-wide: 0.025em;
 --tracking-wider: 0.05em;
 --space-0: 0;
 --space-px: 1px;
 --space-0-5: 0.125rem;
 --space-1: 0.25rem;
 --space-1-5: 0.375rem;
 --space-2: 0.5rem;
 --space-2-5: 0.625rem;
 --space-3: 0.75rem;
 --space-3-5: 0.875rem;
 --space-4: 1rem;
 --space-4-5: 1.125rem;
 --space-5: 1.25rem;
 --space-6: 1.5rem;
 --space-7: 1.75rem;
 --space-8: 2rem;
 --space-9: 2.25rem;
 --space-10: 2.5rem;
 --space-11: 2.75rem;
 --space-12: 3rem;
 --space-14: 3.5rem;
 --space-16: 4rem;
 --space-20: 5rem;
 --space-24: 6rem;
 --space-28: 7rem;
 --space-32: 8rem;
 --space-36: 9rem;
 --space-40: 10rem;
 --section-py: clamp(4rem, 3rem + 5vw, 7rem);
 --section-py-lg: clamp(5rem, 4rem + 6vw, 9rem);
 --container-sm: 40rem; 
 --container-md: 48rem; 
 --container-lg: 64rem; 
 --container-xl: 80rem; 
 --container-2xl: 96rem; 
 --container-max: 90rem; 
 --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
 --sidebar-width: 21.25rem; 
 --radius-none: 0;
 --radius-sm: 0.25rem;
 --radius-md: 0.375rem;
 --radius-lg: 0.5rem;
 --radius-xl: 0.75rem;
 --radius-2xl: 1rem;
 --radius-3xl: 1.5rem;
 --radius-full: 9999px;
 --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 --shadow-glow: 0 0 40px -10px var(--color-brand-primary);
 --shadow-glow-lg: 0 0 60px -5px var(--color-brand-primary);
 --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.1);
 --shadow-brand: 0 4px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
 --shadow-brand-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
 --shadow-brand-lg: 0 20px 30px -8px rgba(15, 23, 42, 0.14), 0 8px 10px -4px rgba(15, 23, 42, 0.06);
 --shadow-brand-subtle: 0 2px 6px -2px rgba(15, 23, 42, 0.06);
 --ease-linear: linear;
 --ease-in: cubic-bezier(0.4, 0, 1, 1);
 --ease-out: cubic-bezier(0, 0, 0.2, 1);
 --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-fluid: cubic-bezier(0.25, 1, 0.5, 1);
 --duration-75: 75ms;
 --duration-100: 100ms;
 --duration-150: 150ms;
 --duration-200: 200ms;
 --duration-300: 300ms;
 --duration-500: 500ms;
 --duration-700: 700ms;
 --duration-1000: 1000ms;
 --lift-micro: none;
 --lift-interactive: none;
 --lift-card: none;
 --lift-deep: none;
 --z-below: -1;
 --z-base: 0;
 --z-sticky-element: 10;
 --z-filter-bar: 50;
 --z-dropdown: 100;
 --z-sticky: 500;
 --z-header: 500;
 --z-fixed: 600;
 --z-overlay: 700;
 --z-modal: 800;
 --z-popover: 900;
 --z-toast: 1000;
 --z-tooltip: 1100;
 --z-max: 9999;
 --header-height: 4.5rem;
 --header-height-scrolled: var(--header-height);
 --btn-padding-x: var(--space-5);
 --btn-padding-y: var(--space-3);
 --btn-font-size: var(--text-sm);
 --btn-font-weight: var(--weight-semibold);
 --btn-radius: var(--radius-xl);
 --card-padding: var(--space-6);
 --card-radius: var(--radius-2xl);
 --card-border: 1px solid var(--color-border-card);
 --card-border-hover: 1px solid var(--color-border-card-hover);
 --card-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
 --card-shadow-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
 --input-padding-x: var(--space-4);
 --input-padding-y: var(--space-3);
 --input-radius: var(--radius-lg);
 --input-border: 1px solid var(--color-border-default);
 --input-bg: var(--color-surface-primary);
 --icon-tile-sm: 2.625rem; 
 --icon-tile-md: 3rem; 
 --icon-tile-lg: 4rem; 
 --icon-radius: var(--radius-xl); 
 --opacity-glass: 0.6;
 --opacity-glass-strong: 0.75;
}
*,
*::before,
*::after {
 box-sizing: border-box;
}
* {
 margin: 0;
 padding: 0;
}
html {
 -moz-text-size-adjust: none;
 -webkit-text-size-adjust: none;
 text-size-adjust: none;
 scroll-padding-top: calc(var(--header-height, 80px) + var(--space-6, 24px));
 -webkit-tap-highlight-color: transparent;
 overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
 html:focus-within,
 html:has(:target) {
 scroll-behavior: smooth;
 }
}
@media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto;
 }
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}
body {
 min-height: 100vh;
 min-height: 100dvh;
 overflow-x: clip;
 width: 100%;
 font-family: var(--font-sans);
 font-size: var(--text-base);
 line-height: var(--leading-normal);
 color: var(--color-text-primary);
 background-color: var(--color-surface-primary);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-display);
 font-weight: var(--weight-semibold);
 line-height: var(--leading-tight);
 text-wrap: balance;
 overflow-wrap: break-word;
}
p, li, figcaption {
 text-wrap: pretty;
 overflow-wrap: break-word;
}
ul, ol {
 list-style: none;
}
a {
 color: inherit;
 text-decoration: none;
}
a:not([class]) {
 color: var(--color-text-link);
 text-decoration-skip-ink: auto;
}
a:not([class]):hover {
 color: var(--color-text-link-hover);
}
img,
picture,
video,
canvas,
svg {
 display: block;
 max-width: 100%;
 height: auto;
}
img {
 border-style: none;
}
input,
button,
textarea,
select {
 font: inherit;
 color: inherit;
}
button {
 cursor: pointer;
 background: none;
 border: none;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
 border-style: none;
 padding: 0;
}
textarea:not([rows]) {
 min-height: 10em;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
:target {
 scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}
:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: none;
}
:focus:not(:focus-visible) {
 outline: none;
}
[disabled] {
 cursor: not-allowed;
 opacity: 0.6;
}
[hidden] {
 display: none !important;
}
::selection {
 background-color: var(--color-brand-primary);
 color: var(--color-text-inverse);
}
.screen-reader-text,
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
.screen-reader-text:focus,
.screen-reader-text:active,
.sr-only-focusable:focus,
.sr-only-focusable:active {
 position: static;
 width: auto;
 height: auto;
 overflow: visible;
 clip: auto;
 white-space: normal;
}
.skip-link {
 position: absolute;
 top: var(--space-4);
 left: var(--space-4);
 z-index: var(--z-max);
 padding: var(--space-3) var(--space-4);
 background: var(--color-surface-inverse);
 color: var(--color-text-inverse);
 font-weight: var(--weight-medium);
 border-radius: var(--radius-md);
 transform: translateY(-200%);
 transition: transform var(--duration-150) var(--ease-out);
}
.skip-link:focus {
 transform: translateY(0);
}
main[tabindex="-1"]:focus {
 outline: none;
}
h1 {
 font-size: var(--text-5xl);
 font-weight: var(--weight-bold);
 letter-spacing: var(--tracking-tight);
 overflow-wrap: break-word;
 word-break: break-word;
}
h2 {
 font-size: var(--text-4xl);
 font-weight: var(--weight-bold);
 letter-spacing: var(--tracking-tight);
}
h3 {
 font-size: var(--text-3xl);
 font-weight: var(--weight-semibold);
}
h4 {
 font-size: var(--text-2xl);
 font-weight: var(--weight-semibold);
}
h5 {
 font-size: var(--text-xl);
 font-weight: var(--weight-semibold);
}
h6 {
 font-size: var(--text-lg);
 font-weight: var(--weight-semibold);
}
.prose {
 font-size: var(--text-base);
 line-height: var(--leading-relaxed);
 color: var(--color-text-primary);
}
.prose > * + * {
 margin-block-start: var(--space-6);
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
 text-wrap: pretty;
 overflow-wrap: break-word;
 word-break: break-word;
}
.prose h1 {
 font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
 line-height: var(--leading-tight);
 margin-block-start: var(--space-12);
 margin-block-end: var(--space-4);
 color: var(--color-text-primary);
}
.prose h2 {
 margin-block-start: var(--space-12);
 margin-block-end: var(--space-4);
 color: var(--color-text-primary);
}
.prose h3 {
 margin-block-start: var(--space-8);
 margin-block-end: var(--space-3);
 color: var(--color-text-primary);
}
.prose h4,
.prose h5,
.prose h6 {
 margin-block-start: var(--space-6);
 margin-block-end: var(--space-2);
 color: var(--color-text-primary);
}
.prose p {
 margin-block: var(--space-4);
}
.prose a:not(.btn) {
 color: var(--color-brand-primary);
 text-decoration: underline;
 text-underline-offset: 0.2em;
 transition: color var(--duration-150) var(--ease-out);
}
.prose a:not(.btn):hover {
 color: var(--color-brand-primary-hover);
}
.prose strong {
 font-weight: var(--weight-semibold);
 color: var(--color-text-primary);
}
.prose ul,
.prose ol {
 padding-inline-start: var(--space-6);
}
.prose ul {
 list-style-type: disc;
}
.prose ol {
 list-style-type: decimal;
}
.prose li {
 margin-block: var(--space-2);
}
.prose li::marker {
 color: var(--color-brand-primary);
}
.prose blockquote {
 padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
 border-inline-start: 4px solid var(--color-brand-primary);
 background-color: var(--color-surface-secondary);
 border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
 color: var(--color-text-primary);
 font-style: normal;
}
.prose blockquote p {
 margin: 0;
}
.prose blockquote p + p {
 margin-block-start: var(--space-2);
}
.prose code {
 padding: var(--space-0-5) var(--space-1-5);
 font-family: var(--font-mono);
 font-size: 0.875em;
 color: var(--color-text-primary);
 background-color: var(--color-surface-tertiary);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-md);
}
.prose pre {
 padding: var(--space-4);
 overflow-x: auto;
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 background-color: var(--color-surface-inverse);
 color: var(--color-text-inverse);
 border-radius: var(--radius-lg);
}
.prose pre code {
 padding: 0;
 color: inherit;
 background: none;
 border: none;
 border-radius: 0;
}
.prose img {
 max-width: 100%;
 height: auto;
 margin-block: var(--space-6);
 border-radius: var(--radius-xl);
}
.prose figure {
 margin-block: var(--space-8);
}
.prose figure img {
 margin-block: 0;
}
.prose figcaption {
 margin-block-start: var(--space-2);
 font-size: var(--text-sm);
 color: var(--color-text-tertiary);
 text-align: center;
}
.prose hr {
 margin-block: var(--space-12);
 border: none;
 border-top: 1px solid var(--color-border-default);
}
.table-responsive,
.wp-block-table {
 width: 100%;
 max-width: 100%;
 overflow-x: auto;
-webkit-overflow-scrolling: touch;
 margin-block: var(--space-6);
 border: 1px solid var(--color-border-default) !important;
 border-radius: var(--radius-xl) !important;
 background: var(--color-surface-primary) !important;
 box-shadow: 0 1px 3px 0 rgba(var(--color-brand-secondary-rgb), 0.04);
 scrollbar-width: thin;
 scrollbar-color: var(--color-border-strong) transparent;
}
.table-responsive::-webkit-scrollbar,
.wp-block-table::-webkit-scrollbar {
 height: 4px;
}
.table-responsive::-webkit-scrollbar-track,
.wp-block-table::-webkit-scrollbar-track {
 background: transparent;
}
.table-responsive::-webkit-scrollbar-thumb,
.wp-block-table::-webkit-scrollbar-thumb {
 background: var(--color-border-strong);
 border-radius: var(--radius-full);
}
.table-responsive table,
.wp-block-table table,
.prose .table-responsive table,
.prose .wp-block-table table,
.prose table {
 margin: 0 !important;
 margin-block: 0 !important;
 width: 100% !important;
 min-width: 100% !important;
 table-layout: auto !important; 
 border-collapse: separate !important;
 border-spacing: 0 !important;
 border: none !important;
 font-size: var(--text-sm, 13px) !important;
}
.wp-block-table thead,
.prose thead {
 border: none !important;
 border-bottom: 1px solid var(--color-border-default) !important;
}
.prose > table {
 display: block;
 max-width: 100%;
 overflow-x: auto;
-webkit-overflow-scrolling: touch;
 border: 1px solid var(--color-border-default) !important;
 border-radius: var(--radius-xl) !important;
 background: var(--color-surface-primary) !important;
 box-shadow: 0 1px 3px 0 rgba(var(--color-brand-secondary-rgb), 0.04);
}
.prose th,
.prose td,
.wp-block-table th,
.wp-block-table td,
.wp-block-table.has-fixed-layout th,
.wp-block-table.has-fixed-layout td {
 padding: var(--space-2-5) var(--space-3-5) !important;
 text-align: left !important;
 vertical-align: middle !important;
 border: none !important;
 border-bottom: 1px solid var(--color-border-subtle) !important;
 line-height: var(--leading-normal, 1.5) !important;
 word-break: normal !important;
 overflow-wrap: normal !important;
 hyphens: none !important;
 white-space: nowrap !important; 
}
.prose td:has(p),
.prose td.is-wrap {
 white-space: normal !important;
 min-width: 160px;
}
.prose tbody tr:last-child td,
.wp-block-table tbody tr:last-child td {
 border-bottom: none !important;
}
.prose th,
.wp-block-table th {
 font-size: var(--text-xs) !important;
 font-weight: var(--weight-semibold, 600) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.05em !important;
 color: var(--color-text-secondary) !important;
 background-color: var(--color-surface-secondary) !important;
 border-bottom: 1px solid var(--color-border-default) !important;
}
.prose td code,
.prose td time,
.prose td:has(time),
.prose td:has(code),
.wp-block-table td code,
.wp-block-table td time {
 font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
 font-variant-numeric: tabular-nums !important;
 font-size: 12.5px !important;
}
.prose tbody tr:hover td,
.wp-block-table tbody tr:hover td {
 background-color: var(--color-surface-secondary) !important;
}
.table-responsive th:first-child,
.wp-block-table th:first-child,
.prose > table th:first-child {
 border-top-left-radius: calc(var(--radius-xl) - 1px);
}
.table-responsive th:last-child,
.wp-block-table th:last-child,
.prose > table th:last-child {
 border-top-right-radius: calc(var(--radius-xl) - 1px);
}
.table-responsive tbody tr:last-child td:first-child,
.wp-block-table tbody tr:last-child td:first-child,
.prose > table tbody tr:last-child td:first-child {
 border-bottom-left-radius: calc(var(--radius-xl) - 1px);
}
.table-responsive tbody tr:last-child td:last-child,
.wp-block-table tbody tr:last-child td:last-child,
.prose > table tbody tr:last-child td:last-child {
 border-bottom-right-radius: calc(var(--radius-xl) - 1px);
}
.faq-accordion {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 margin-block: var(--space-6);
}
.faq-item {
 background: var(--color-surface-primary);
 border: 1px solid var(--color-border-default);
 border-radius: var(--radius-xl);
 overflow: hidden;
 transition: border-color var(--duration-200) var(--ease-out), box-shadow var(--duration-200) var(--ease-out);
}
.faq-item[open] {
 border-color: var(--color-brand-primary);
 box-shadow: var(--shadow-sm);
}
.faq-item summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: var(--space-4) var(--space-5);
 font-weight: var(--weight-semibold);
 color: var(--color-text-primary);
 cursor: pointer;
 user-select: none;
 list-style: none;
 font-size: var(--text-base);
 transition: color var(--duration-150) var(--ease-out);
}
.faq-item summary::-webkit-details-marker {
 display: none;
}
.faq-item summary::-moz-list-bullet {
 list-style-type: none;
}
.faq-item summary:hover {
 color: var(--color-brand-primary);
}
.faq-item summary:not(:has(i))::after {
 content: '';
 display: inline-block;
 width: 8px;
 height: 8px;
 border-right: 2px solid var(--color-text-tertiary);
 border-bottom: 2px solid var(--color-text-tertiary);
 transform: rotate(45deg);
 transition: transform var(--duration-200) var(--ease-out), border-color var(--duration-200) var(--ease-out);
 margin-inline-start: var(--space-3);
 flex-shrink: 0;
}
.faq-item[open] summary:not(:has(i))::after {
 transform: rotate(-135deg);
 border-color: var(--color-brand-primary);
}
.faq-item p,
.faq-item .faq-answer {
 padding: 0 var(--space-5) var(--space-4);
 color: var(--color-text-secondary);
 font-size: var(--text-base);
 line-height: var(--leading-relaxed);
 margin: 0;
}
.label {
 display: inline-flex;
 align-items: center;
 padding: var(--space-1) var(--space-3);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 text-transform: none;
 letter-spacing: normal;
 border-radius: var(--radius-full);
 background-color: var(--color-surface-tertiary);
 color: var(--color-text-secondary);
}
.label--primary {
 background-color: var(--color-brand-primary);
 color: var(--color-text-inverse);
}
.label--success {
 background-color: var(--color-success-light);
 color: var(--color-success);
}
.label--warning {
 background-color: var(--color-warning-light);
 color: var(--color-warning-dark);
}
.label--error {
 background-color: var(--color-error-light);
 color: var(--color-error);
}
.truncate {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.post-meta,
.entry-meta,
.post-card-hero__meta,
.product-card__term,
.card__meta {
 color: var(--color-text-secondary);
}
.container {
 width: 100%;
 max-width: var(--container-max);
 margin-inline: auto;
 padding-inline: var(--gutter);
}
.section {
 padding-block: var(--section-py);
}
.section--alt {
 background-color: var(--color-surface-secondary);
}
.section__header {
 max-width: 40rem;
 margin-inline: auto;
 margin-block-end: var(--space-12);
 text-align: center;
}
.section__header--left {
 margin-inline: 0;
 text-align: left;
}
.section__label {
 display: inline-block;
 margin-block-end: var(--space-3);
 padding: var(--space-1-5) var(--space-3);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 text-transform: none;
 letter-spacing: normal;
 color: var(--color-brand-primary-hover);
 background: rgba(var(--color-brand-primary-rgb), 0.1);
 border-radius: var(--radius-full);
}
.section__title {
 margin: 0 0 var(--space-3);
 font-family: var(--font-display);
 font-size: var(--text-4xl);
 font-weight: var(--weight-bold);
 line-height: var(--leading-tight);
 color: var(--color-text-primary);
}
.section__subtitle {
 margin: 0;
 font-size: var(--text-lg);
 color: var(--color-text-secondary);
 line-height: var(--leading-relaxed);
}
.section__actions {
 display: flex;
 justify-content: center;
 margin-block-start: var(--space-10);
}
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
@media (min-width: 768px) {
 .md\:block { display: block; }
 .md\:hidden { display: none; }
 .md\:flex { display: flex; }
}
@media (max-width: 767px) {
 .mobile-hidden { display: none; }
}
.transition {
 transition-property: color, background-color, border-color, box-shadow, transform, opacity;
 transition-duration: var(--duration-200);
 transition-timing-function: var(--ease-out);
}
.error-404 {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 min-height: calc(100dvh - var(--header-height) - 180px);
 padding: var(--space-12) var(--space-4);
 background: var(--color-surface-secondary);
 overflow: hidden;
}
.error-404__bg {
 position: absolute;
 inset: 0;
 background-image:
 linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
 linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
 background-size: 32px 32px;
 mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
 -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
 pointer-events: none;
 z-index: 0;
}
.error-404 .container {
 position: relative;
 z-index: 1;
 display: flex;
 justify-content: center;
 width: 100%;
}
.error-404__card {
 max-width: 540px;
 width: 100%;
 margin-inline: auto;
 padding: var(--space-10) var(--space-8);
 background: var(--color-surface-primary);
 border: 1px solid var(--color-border-card);
 border-radius: var(--radius-2xl);
 box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
 text-align: center;
}
@media (max-width: 639px) {
 .error-404__card {
 padding: var(--space-8) var(--space-5);
 }
}
.error-404__status-pill {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-1) var(--space-3-5);
 margin-block-end: var(--space-4);
 background: var(--color-surface-secondary);
 border: 1px solid var(--color-border-default);
 border-radius: var(--radius-full);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 color: var(--color-text-secondary);
}
.error-404__status-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background-color: var(--color-warning);
 box-shadow: 0 0 0 2px rgba(var(--color-warning-rgb), 0.2);
}
.error-404__status-code {
 font-weight: var(--weight-bold);
 color: var(--color-text-primary);
}
.error-404__status-sep {
 color: var(--color-border-strong);
}
.error-404__status-text {
 font-weight: var(--weight-medium);
 font-family: var(--font-sans);
}
.error-404__title {
 margin: 0 0 var(--space-3);
 font-family: var(--font-display);
 font-size: clamp(1.875rem, 3.2vw, 2.375rem);
 font-weight: var(--weight-bold);
 color: var(--color-text-primary);
 line-height: var(--leading-tight);
 letter-spacing: -0.03em;
}
.error-404__desc {
 margin: 0 0 var(--space-7);
 font-size: var(--text-base);
 color: var(--color-text-secondary);
 line-height: var(--leading-relaxed);
 max-width: 440px;
 margin-inline: auto;
}
.error-404__search {
 margin-block-end: var(--space-7);
}
.error-404__search-box {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 padding: 5px 6px 5px 14px;
 background: var(--color-surface-primary);
 border: 1px solid var(--color-border-default);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-xs);
 transition: border-color var(--duration-150) ease, box-shadow var(--duration-150) ease;
}
.error-404__search-box:focus-within {
 border-color: var(--color-brand-primary);
 box-shadow: 0 0 0 3px rgba(var(--color-brand-primary-rgb), 0.12);
}
.error-404__search-box > i {
 color: var(--color-text-tertiary);
 font-size: 1.125rem;
 flex-shrink: 0;
}
.error-404__search-input {
 flex: 1;
 min-width: 0;
 border: none !important;
 background: transparent !important;
 padding: var(--space-2) 0 !important;
 font-family: var(--font-sans) !important;
 font-size: var(--text-sm) !important;
 color: var(--color-text-primary) !important;
 outline: none !important;
 box-shadow: none !important;
}
.error-404__search-input::placeholder {
 color: var(--color-text-tertiary);
}
.error-404__search-submit {
 flex-shrink: 0;
 padding-inline: var(--space-4) !important;
 font-weight: var(--weight-medium) !important;
}
.error-404__divider {
 display: flex;
 align-items: center;
 margin-block: var(--space-7) var(--space-5);
 color: var(--color-text-tertiary);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
}
.error-404__divider::before,
.error-404__divider::after {
 content: '';
 flex: 1;
 height: 1px;
 background: var(--color-border-subtle);
}
.error-404__divider span {
 padding-inline: var(--space-3);
 white-space: nowrap;
}
.error-404__shortcuts {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--space-2-5);
}
.error-404__shortcut {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: var(--space-1-5);
 padding: var(--space-3-5) var(--space-2);
 background: var(--color-surface-secondary);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-xl);
 text-decoration: none;
 transition: all var(--duration-150) var(--ease-apple);
}
.error-404__shortcut-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 border-radius: var(--radius-lg);
 background: var(--color-surface-primary);
 border: 1px solid var(--color-border-hairline);
 color: var(--color-brand-primary);
 font-size: 1.05rem;
 transition: transform var(--duration-150) var(--ease-apple), background-color var(--duration-150) var(--ease-apple), color var(--duration-150) var(--ease-apple);
}
.error-404__shortcut-label {
 font-size: var(--text-xs);
 font-weight: var(--weight-semibold);
 color: var(--color-text-secondary);
 transition: color var(--duration-150) var(--ease-apple);
}
.error-404__shortcut:hover {
 background: var(--color-surface-primary);
 border-color: var(--color-border-card-hover);
 transform: none;
 box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}
.error-404__shortcut:hover .error-404__shortcut-icon {
 background: var(--color-brand-primary);
 color: var(--color-text-inverse);
 transform: scale(1.05);
}
.error-404__shortcut:hover .error-404__shortcut-label {
 color: var(--color-text-primary);
}
@media (max-width: 479px) {
 .error-404__shortcuts {
 grid-template-columns: repeat(2, 1fr);
 }
}
.announcement-bar {
 position: relative;
 padding-block: 10px;
 min-height: 46px;
 background: var(--color-surface-inverse);
 color: var(--color-text-inverse);
 border-bottom: 1px solid var(--color-border-dark-subtle);
 overflow: hidden;
}
.announcement-bar .container {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 padding-inline: var(--space-4) calc(var(--space-4) + 2.5rem);
}
.announcement-bar__content {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-3);
 flex-wrap: wrap;
 line-height: 1.45;
 font-size: var(--text-sm);
 font-weight: var(--weight-medium);
}
.announcement-bar__badge {
 display: inline-flex;
 align-items: center;
 padding: 2px 10px;
 font-size: 0.75rem;
 font-weight: var(--weight-medium);
 letter-spacing: normal;
 text-transform: none;
 color: var(--color-text-inverse);
 background: rgba(255, 255, 255, 0.12);
 border: 1px solid var(--color-border-dark-subtle);
 border-radius: var(--radius-full);
 line-height: 1.4;
 white-space: nowrap;
}
.announcement-bar__text {
 font-size: var(--text-sm);
 font-weight: var(--weight-medium);
 color: var(--color-text-inverse);
 margin: 0;
 line-height: 1.45;
}
.announcement-bar__text strong {
 font-weight: var(--weight-semibold);
 color: var(--color-text-inverse);
}
.announcement-bar__timer {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 10px;
 background: rgba(0, 0, 0, 0.24);
 border: 1px solid var(--color-border-dark-subtle);
 border-radius: var(--radius-full);
 font-family: var(--font-mono, monospace);
 font-variant-numeric: tabular-nums;
 font-size: 0.8125rem;
 font-weight: 600;
 color: var(--color-text-inverse);
 line-height: 1.35;
 white-space: nowrap;
 user-select: none;
}
.announcement-bar__timer-icon {
 font-size: 0.875rem;
 color: var(--color-text-inverse-muted);
 margin-inline-end: 2px;
}
.announcement-bar__timer .countdown-unit {
 display: inline-flex;
 align-items: baseline;
 gap: 1px;
}
.announcement-bar__timer .countdown-val {
 font-weight: 700;
 color: var(--color-text-inverse);
}
.announcement-bar__timer .countdown-suffix {
 font-size: 0.6875rem;
 font-weight: 600;
 color: var(--color-text-inverse-muted);
 text-transform: lowercase;
}
.announcement-bar__timer .countdown-sep {
 font-weight: 700;
 color: var(--color-text-inverse-subtle);
 margin-inline: 1px;
}
.announcement-bar__cta {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 4px 14px;
 background: var(--color-surface-primary);
 color: var(--color-text-primary);
 font-size: 0.75rem;
 font-weight: 700;
 text-decoration: none;
 border-radius: var(--radius-full);
 border: 1px solid var(--color-border-card);
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 transition: all var(--duration-150) var(--ease-out);
 line-height: 1.35;
 white-space: nowrap;
}
.announcement-bar__cta i {
 font-size: 12px;
 transition: transform var(--duration-150) var(--ease-out);
 line-height: 1;
}
.announcement-bar__cta:hover {
 background: var(--color-surface-secondary);
 color: var(--color-text-primary);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.announcement-bar__cta:active {
 transform: translateY(1px);
}
.announcement-bar__cta:focus-visible {
 outline: 2px solid var(--color-text-inverse);
 outline-offset: 2px;
}
.announcement-bar__close {
 position: absolute;
 right: var(--space-4);
 top: 50%;
 transform: translateY(-50%);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 min-width: 32px;
 min-height: 32px;
 padding: 0;
 color: rgba(255, 255, 255, 0.7);
 background: transparent;
 border: none;
 border-radius: var(--radius-full);
 cursor: pointer;
 transition:
 color var(--duration-150) var(--ease-out),
 background-color var(--duration-150) var(--ease-out);
}
.announcement-bar__close::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-width: 44px;
 min-height: 44px;
 width: 100%;
 height: 100%;
}
.announcement-bar__close:hover {
 color: var(--color-text-inverse);
 background-color: rgba(255, 255, 255, 0.18);
}
.announcement-bar__close:focus-visible {
 outline: 2px solid var(--color-text-inverse);
 outline-offset: 2px;
}
.announcement-bar__close i {
 font-size: 0.875rem;
}
.announcement-bar.is-hidden {
 display: none;
}
@media (max-width: 768px) {
 .announcement-bar {
 padding-block: var(--space-2);
 min-height: 44px;
 }
 .announcement-bar .container {
 padding-inline: var(--space-3) calc(var(--space-3) + 2rem) !important;
 justify-content: center;
 }
 .announcement-bar__content {
 gap: var(--space-2);
 font-size: 0.75rem;
 }
 .announcement-bar__text {
 font-size: 0.75rem;
 }
 .announcement-bar__timer .countdown-unit--sec,
 .announcement-bar__timer .countdown-sep--sec {
 display: none !important;
 }
 .announcement-bar__close {
 right: var(--space-2);
 width: 36px;
 height: 36px;
 }
 .announcement-bar__close::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-width: 44px;
 min-height: 44px;
 }
}
@media (max-width: 480px) {
 .announcement-bar__content {
 gap: 6px;
 }
 .announcement-bar__badge {
 font-size: 0.625rem;
 padding: 1px 6px;
 }
 .announcement-bar__cta {
 padding: 2px 8px !important;
 font-size: 0.625rem !important;
 }
}
.site-header {
 position: sticky;
 top: 0;
 z-index: var(--z-header, 500);
 height: var(--header-height);
 background-color: rgba(255, 255, 255, var(--opacity-glass));
 backdrop-filter: blur(24px) saturate(180%);
 -webkit-backdrop-filter: blur(24px) saturate(180%);
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
 transition:
 background-color var(--duration-200) var(--ease-out),
 box-shadow var(--duration-200) var(--ease-out),
 transform var(--duration-300) var(--ease-out);
}
.admin-bar .site-header {
 top: 32px;
}
@media screen and (max-width: 782px) {
 .admin-bar .site-header {
 top: 46px;
 }
}
.site-header.is-scrolled {
 background-color: rgba(255, 255, 255, var(--opacity-glass-strong));
 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.has-transparent-header .site-header:not(.is-scrolled) {
 background-color: transparent;
 border-color: transparent;
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
}
.has-transparent-header .site-header:not(.is-scrolled) .nav--primary > .nav__item > .nav__link,
.has-transparent-header .site-header:not(.is-scrolled) .site-logo__text,
.has-transparent-header .site-header:not(.is-scrolled) .header__action {
 color: var(--color-text-inverse);
}
.has-transparent-header.has-hero .site-header:not(.is-scrolled) .header__action,
.has-transparent-header.home .site-header:not(.is-scrolled) .header__action,
.has-transparent-header.front-page .site-header:not(.is-scrolled) .header__action,
.has-transparent-header .site-header:not(.is-scrolled) .nav-toggle {
 color: var(--color-text-primary);
}
.has-transparent-header.has-hero .site-header:not(.is-scrolled) .site-brand-name,
.has-transparent-header.home .site-header:not(.is-scrolled) .site-brand-name,
.has-transparent-header.front-page .site-header:not(.is-scrolled) .site-brand-name,
.has-transparent-header.has-hero .site-header:not(.is-scrolled) .site-logo__text,
.has-transparent-header.home .site-header:not(.is-scrolled) .site-logo__text,
.has-transparent-header.front-page .site-header:not(.is-scrolled) .site-logo__text {
 color: var(--color-text-primary);
}
.has-transparent-header .site-header:not(.is-scrolled) .nav--primary > .nav__item.is-current > .nav__link {
 color: var(--color-text-inverse);
 background: rgba(255, 255, 255, 0.15);
 border-color: transparent;
 box-shadow: none;
}
.has-transparent-header .site-header:not(.is-scrolled) .header__action--btn {
 color: var(--color-text-inverse);
 background-color: var(--color-brand-primary);
 border-color: var(--color-brand-primary);
 box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.2);
}
.has-transparent-header .site-header:not(.is-scrolled) .header__action--btn:hover {
 background-color: var(--color-brand-primary-hover);
 border-color: var(--color-brand-primary-hover);
 color: var(--color-text-inverse);
 box-shadow: 0 4px 14px -1px rgba(0, 0, 0, 0.3);
}
.site-header--checkout {
 height: var(--header-height) !important;
 background-color: var(--color-surface-primary) !important;
 background: var(--color-surface-primary) !important;
 backdrop-filter: none !important;
 -webkit-backdrop-filter: none !important;
 border-bottom: 1px solid var(--color-border-default) !important;
 box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
}
.site-header--checkout .header__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 max-width: 1140px;
 height: 100%;
}
@media (min-width: 992px) {
 .site-header--checkout .header__inner {
 padding-inline: 0 !important;
 }
}
.header__secure-badge {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 font-size: var(--text-xs);
 font-weight: var(--weight-semibold);
 color: var(--color-success);
 background: rgba(5, 150, 105, 0.08);
 border: 1px solid rgba(5, 150, 105, 0.2);
 padding: var(--space-1-5) var(--space-3);
 border-radius: var(--radius-full);
}
.header__secure-badge i {
 font-size: 0.875rem;
}
.header__back-link {
 display: inline-flex;
 align-items: center;
 gap: var(--space-1-5);
 font-size: var(--text-sm);
 font-weight: var(--weight-medium);
 color: var(--color-text-secondary);
 text-decoration: none;
 transition: color var(--duration-150) var(--ease-out);
}
.header__back-link:hover {
 color: var(--color-brand-primary);
}
@media (max-width: 640px) {
 .header__secure-badge span {
 display: none;
 }
}
.header__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100%;
 gap: var(--space-6);
 max-width: var(--container-max, 1440px);
 margin-inline: auto;
}
.header__logo {
 flex-shrink: 0;
 display: flex;
 align-items: center;
}
.custom-logo-link {
 display: inline-flex;
 align-items: center;
 line-height: 1;
 text-decoration: none;
 transition: opacity var(--duration-200) var(--ease-apple);
}
.custom-logo-link:hover {
 opacity: 0.92;
 transform: none;
}
.custom-logo {
 height: 32px;
 width: auto;
 max-width: 190px;
 object-fit: contain;
 display: block;
 transition: height var(--duration-200) var(--ease-out);
}
@media (max-width: 1023px) {
 .custom-logo {
 height: 28px;
 max-width: 170px;
 }
}
.site-brand-lockup {
 display: inline-flex;
 align-items: center;
 gap: 0.625rem;
 text-decoration: none;
 transition: opacity var(--duration-200) var(--ease-apple);
}
.site-brand-lockup:hover {
 opacity: 0.95;
 transform: none;
}
.site-brand-logo {
 height: 32px;
 width: 32px;
 object-fit: contain;
 flex-shrink: 0;
 filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.2));
 transition: filter var(--duration-200) var(--ease-apple);
}
.site-brand-lockup:hover .site-brand-logo {
 filter: drop-shadow(0 4px 14px rgba(37, 99, 235, 0.45));
}
.site-brand-name {
 font-family: var(--font-display);
 font-size: 1.375rem;
 font-weight: 800;
 color: var(--color-text-primary);
 letter-spacing: -0.035em;
 line-height: 1;
 display: inline-flex;
 align-items: center;
}
.site-brand-accent {
 color: var(--color-brand-primary);
 font-weight: 800;
}
.has-transparent-header .site-header:not(.is-scrolled) .site-brand-name {
 color: var(--color-text-inverse);
}
.has-transparent-header .site-header:not(.is-scrolled) .site-brand-accent {
 color: var(--color-accent-sky);
}
@media (max-width: 767px) {
 .site-brand-logo {
 height: 26px;
 width: 26px;
 }
 .site-brand-name {
 font-size: 1.125rem;
 }
 .custom-logo {
 height: 26px;
 max-width: 155px;
 }
}
@media (max-width: 374px) {
 .site-brand-logo {
 height: 24px;
 width: 24px;
 }
 .site-brand-name {
 font-size: 1rem;
 }
 .custom-logo {
 height: 24px;
 max-width: 135px;
 }
 .header__inner {
 gap: var(--space-2);
 }
}
@media (max-width: 339px) {
 .site-brand-logo {
 height: 22px;
 width: 22px;
 }
 .site-brand-name {
 font-size: 0.9375rem;
 }
 .custom-logo {
 height: 22px;
 max-width: 120px;
 }
}
.header__nav {
 display: none;
 flex: 1;
 justify-content: center;
}
@media (min-width: 1024px) {
 .header__nav {
 display: flex;
 }
}
.header__actions {
 display: flex;
 align-items: center;
 gap: var(--space-1);
}
@media (min-width: 768px) {
 .header__actions {
 gap: var(--space-2);
 }
}
.header__action {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.75rem;
 height: 2.75rem;
 min-width: 44px;
 min-height: 44px;
 color: var(--color-text-primary);
 background: transparent;
 border-radius: var(--radius-lg);
 transition:
 color var(--duration-150) var(--ease-out),
 background-color var(--duration-150) var(--ease-out);
}
.header__action:hover {
 color: var(--color-brand-primary);
 background-color: var(--color-surface-tertiary);
}
.header__action:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.header__action i {
 font-size: 1.25rem;
}
.cart-trigger {
 position: relative;
}
.cart-count {
 position: absolute;
 top: -2px;
 right: -2px;
 display: flex;
 align-items: center;
 justify-content: center;
 min-width: 1.125rem;
 height: 1.125rem;
 padding-inline: 0.25rem;
 font-size: 0.625rem;
 font-weight: var(--weight-bold);
 color: var(--color-text-inverse);
 background-color: var(--color-brand-primary);
 border-radius: var(--radius-full);
}
.mobile-nav .cart-count {
 position: static;
 display: inline;
 min-width: 0;
 height: auto;
 padding: 0;
 font-size: inherit;
 font-weight: inherit;
 color: inherit;
 background-color: transparent;
 border-radius: 0;
}
.header__account {
 position: relative;
 display: inline-flex;
 align-items: center;
}
@media (max-width: 768px) {
 .header__account {
 display: none;
 }
}
.account-trigger.header__action {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.75rem;
 height: 2.75rem;
 min-width: 44px;
 min-height: 44px;
 padding: 0;
 border: none;
 background: transparent;
 cursor: pointer;
 border-radius: var(--radius-lg);
 transition: background-color var(--duration-150) var(--ease-out);
}
.account-trigger.header__action:hover {
 background-color: var(--color-surface-tertiary);
}
.account-trigger:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.account-monogram {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background: var(--color-brand-primary);
 color: var(--color-text-inverse);
 font-family: var(--font-sans);
 font-weight: 700;
 line-height: 1;
 flex-shrink: 0;
}
.account-monogram--sm {
 width: 32px;
 height: 32px;
 font-size: 0.8125rem;
 box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 transition: transform var(--duration-150) var(--ease-out), box-shadow var(--duration-150) var(--ease-out);
}
.account-trigger:hover .account-monogram--sm {
 transform: scale(1.05);
 background: var(--color-brand-primary-hover);
 box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.account-trigger[aria-expanded="true"] .account-monogram--sm {
 box-shadow: 0 0 0 2px var(--color-surface-primary), 0 0 0 4px var(--color-brand-primary);
}
.account-monogram--md {
 width: 36px;
 height: 36px;
 font-size: 0.875rem;
 border-radius: 50%;
}
.account-dropdown {
 position: absolute;
 top: calc(100% + 0.5rem);
 right: 0;
 min-width: 250px;
 background: rgba(255, 255, 255, 0.98);
 backdrop-filter: blur(24px) saturate(180%);
 -webkit-backdrop-filter: blur(24px) saturate(180%);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-xl);
 box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
 padding: var(--space-2);
 z-index: 1000;
 pointer-events: auto;
}
.account-dropdown__header {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 padding: var(--space-2-5) var(--space-3);
}
.account-dropdown__info {
 display: flex;
 flex-direction: column;
 min-width: 0;
}
.account-dropdown__name {
 font-family: var(--font-sans);
 font-size: var(--text-sm);
 font-weight: var(--weight-semibold);
 color: var(--color-text-primary);
 line-height: 1.25;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.account-dropdown__email {
 font-family: var(--font-sans);
 font-size: var(--text-xs);
 color: var(--color-text-tertiary);
 line-height: 1.3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.account-dropdown__divider {
 height: 1px;
 background: var(--color-border-subtle);
 margin: var(--space-1-5) 0;
}
.account-dropdown__nav,
.account-dropdown__footer {
 display: flex;
 flex-direction: column;
 gap: 1px;
}
.account-dropdown__item {
 display: flex;
 align-items: center;
 gap: var(--space-2-5);
 padding: 0.5rem 0.75rem;
 border-radius: var(--radius-md);
 color: var(--color-text-secondary);
 text-decoration: none;
 font-size: var(--text-sm);
 font-weight: var(--weight-medium);
 transition: background-color var(--duration-150) var(--ease-out), color var(--duration-150) var(--ease-out);
}
.account-dropdown__item i {
 font-size: 1.0625rem;
 color: var(--color-text-tertiary);
 transition: color var(--duration-150) var(--ease-out);
 flex-shrink: 0;
}
.account-dropdown__item:hover,
.account-dropdown__item:focus-visible {
 background-color: var(--color-surface-secondary);
 color: var(--color-brand-primary);
 outline: none;
}
.account-dropdown__item:hover i,
.account-dropdown__item:focus-visible i {
 color: var(--color-brand-primary);
}
.account-dropdown__item--danger:hover,
.account-dropdown__item--danger:focus-visible {
 background-color: var(--color-error-light);
 color: var(--color-error);
}
.account-dropdown__item--danger:hover i,
.account-dropdown__item--danger:focus-visible i {
 color: var(--color-error);
}
.header__cta {
 margin-inline-start: var(--space-2);
}
.nav-toggle {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 5px;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
 -webkit-user-select: none;
}
@media (min-width: 1024px) {
 .nav-toggle {
 display: none;
 }
}
.nav-toggle__bar {
 display: block;
 width: 20px;
 height: 2px;
 background-color: currentColor;
 border-radius: var(--radius-full);
 transition:
 transform var(--duration-300) var(--ease-out),
 opacity var(--duration-300) var(--ease-out);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
 opacity: 0;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav {
 position: fixed;
 inset: 0;
 z-index: var(--z-modal, 500);
 visibility: hidden;
 overflow: hidden;
 pointer-events: none;
 transition: visibility var(--duration-300) var(--ease-out);
}
.mobile-nav.is-open {
 visibility: visible;
 pointer-events: auto;
}
.mobile-nav__backdrop {
 position: absolute;
 inset: 0;
 background-color: rgba(15, 23, 42, 0.55);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 opacity: 0;
 touch-action: none;
 transition: opacity var(--duration-300) var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__backdrop {
 opacity: 1;
}
.mobile-nav__panel {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 width: min(100dvw - 32px, 380px);
 height: 100%;
 height: 100dvh;
 background-color: var(--color-surface-primary);
 box-shadow: -12px 0 35px -5px rgba(15, 23, 42, 0.2);
 transform: translateX(100%);
 transition: transform var(--duration-300) cubic-bezier(0.16, 1, 0.3, 1);
 display: flex;
 flex-direction: column;
}
.mobile-nav.is-open .mobile-nav__panel {
 transform: translateX(0);
}
.admin-bar .mobile-nav__panel {
 top: 32px;
 height: calc(100% - 32px);
 height: calc(100dvh - 32px);
}
@media (max-width: 782px) {
 .admin-bar .mobile-nav__panel {
 top: 46px;
 height: calc(100% - 46px);
 height: calc(100dvh - 46px);
 }
}
.mobile-nav__inner {
 display: flex;
 flex-direction: column;
 height: 100%;
 padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom));
 overflow: hidden;
}
.mobile-nav__header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding-bottom: var(--space-4);
 border-bottom: 1px solid var(--color-border-subtle);
 margin-bottom: var(--space-4);
 flex-shrink: 0;
}
.mobile-nav__close {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.75rem;
 height: 2.75rem;
 min-width: 44px;
 min-height: 44px;
 color: var(--color-text-secondary);
 background-color: var(--color-surface-tertiary);
 border-radius: var(--radius-lg);
 border: none;
 cursor: pointer;
 transition:
 color var(--duration-150) var(--ease-out),
 background-color var(--duration-150) var(--ease-out);
}
.mobile-nav__close:hover {
 color: var(--color-text-primary);
 background-color: var(--color-border-default);
}
.mobile-nav__close:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.mobile-nav__close i {
 font-size: 1.25rem;
}
.mobile-nav__search {
 margin-bottom: var(--space-4);
 flex-shrink: 0;
}
.mobile-search-input-wrapper {
 position: relative;
 display: flex;
 align-items: center;
}
.mobile-search-icon {
 position: absolute;
 left: var(--space-3);
 color: var(--color-text-tertiary);
 font-size: 1.125rem;
 pointer-events: none;
}
.mobile-search-input {
 width: 100%;
 padding: 0.625rem 0.875rem 0.625rem 2.5rem;
 font-family: var(--font-sans);
 font-size: 16px;
 color: var(--color-text-primary);
 background-color: var(--color-surface-secondary);
 border: 1px solid var(--color-border-default);
 border-radius: var(--radius-xl);
 outline: none;
 transition:
 border-color var(--duration-150) var(--ease-out),
 background-color var(--duration-150) var(--ease-out),
 box-shadow var(--duration-150) var(--ease-out);
}
.mobile-search-input:focus {
 background-color: var(--color-surface-primary);
 border-color: var(--color-brand-primary);
 box-shadow: 0 0 0 3px rgba(var(--color-brand-primary-rgb), 0.15);
}
.mobile-search-input:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.mobile-nav__menu {
 flex: 1 1 auto;
 overflow-y: auto;
 overscroll-behavior: contain;
 -webkit-overflow-scrolling: touch;
 margin-bottom: var(--space-4);
 scrollbar-width: thin;
 scrollbar-color: var(--color-border-default) transparent;
}
.mobile-nav__menu::-webkit-scrollbar {
 width: 4px;
}
.mobile-nav__menu::-webkit-scrollbar-track {
 background: transparent;
}
.mobile-nav__menu::-webkit-scrollbar-thumb {
 background-color: var(--color-border-default);
 border-radius: var(--radius-full);
}
.mobile-nav__list {
 display: flex;
 flex-direction: column;
 gap: var(--space-1);
 list-style: none;
 padding: 0;
 margin: 0;
}
.mobile-nav__item {
 display: flex;
 flex-direction: column;
}
.mobile-nav__item-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 gap: var(--space-2);
}
.mobile-nav__link {
 flex: 1 1 auto;
 display: flex;
 align-items: center;
 min-height: 44px;
 padding: var(--space-2) var(--space-3);
 font-size: var(--text-base);
 font-weight: var(--weight-medium);
 color: var(--color-text-primary);
 text-decoration: none;
 border-radius: var(--radius-lg);
 transition:
 color var(--duration-150) var(--ease-out),
 background-color var(--duration-150) var(--ease-out);
}
.mobile-nav__item--has-children > .mobile-nav__item-row > .mobile-nav__link {
 cursor: pointer;
}
.mobile-nav__link:hover,
.mobile-nav__item.is-current > .mobile-nav__link,
.mobile-nav__item.is-current > .mobile-nav__item-row .mobile-nav__link {
 color: var(--color-brand-primary);
 background-color: var(--color-surface-tertiary);
}
.mobile-nav__sub-toggle {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.75rem;
 height: 2.75rem;
 min-width: 44px;
 min-height: 44px;
 color: var(--color-text-tertiary);
 background-color: transparent;
 border: none;
 border-radius: var(--radius-lg);
 transition:
 color var(--duration-150) var(--ease-out),
 background-color var(--duration-150) var(--ease-out),
 border-color var(--duration-150) var(--ease-out);
}
.mobile-nav__sub-toggle:hover {
 color: var(--color-brand-primary);
 background-color: var(--color-surface-tertiary);
}
.mobile-nav__sub-toggle:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.mobile-nav__sub-toggle i {
 font-size: 1rem;
 transition: transform var(--duration-200) var(--ease-out);
}
.mobile-nav__item.is-open > .mobile-nav__item-row .mobile-nav__sub-toggle i {
 transform: rotate(180deg);
}
.mobile-nav__sub-wrapper {
 display: grid;
 grid-template-rows: 0fr;
 overflow: hidden;
 transition: grid-template-rows var(--duration-300) cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav__item.is-open > .mobile-nav__sub-wrapper {
 grid-template-rows: 1fr;
}
.mobile-nav__sub-wrapper > .mobile-nav__sub-list {
 min-height: 0;
 overflow: hidden;
}
.mobile-nav__sub-list {
 display: flex;
 flex-direction: column;
 gap: var(--space-1);
 list-style: none;
 padding: 0 0 0 var(--space-4);
 margin: 0;
 opacity: 0;
 visibility: hidden;
 transition:
 opacity var(--duration-200) var(--ease-out),
 visibility var(--duration-200) var(--ease-out),
 margin var(--duration-200) var(--ease-out);
}
.mobile-nav__item:not(:has(.mobile-nav__sub-wrapper)) > .mobile-nav__sub-list {
 max-height: 0;
 overflow: hidden;
 transition: max-height var(--duration-300) cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav__item.is-open:not(:has(.mobile-nav__sub-wrapper)) > .mobile-nav__sub-list {
 max-height: none;
}
.mobile-nav__item.is-open > .mobile-nav__sub-list,
.mobile-nav__item.is-open > .mobile-nav__sub-wrapper > .mobile-nav__sub-list {
 opacity: 1;
 visibility: visible;
 margin-top: var(--space-1);
 margin-bottom: var(--space-2);
}
.mobile-nav__sub-list .mobile-nav__link {
 font-size: var(--text-sm);
 font-weight: var(--weight-regular);
 color: var(--color-text-secondary);
 padding: var(--space-2) var(--space-3);
}
.mobile-nav__sub-list .mobile-nav__link:hover {
 color: var(--color-brand-primary);
 background-color: var(--color-surface-tertiary);
}
.mobile-nav__card-link {
 display: flex;
 align-items: center;
 gap: var(--space-2-5);
 padding: var(--space-2) var(--space-2-5);
 min-height: 48px;
 border-radius: var(--radius-lg);
 background: var(--color-surface-secondary);
 border: 1px solid var(--color-border-subtle);
 text-decoration: none;
 margin-block: 2px;
 transition:
 background-color var(--duration-150) var(--ease-apple),
 border-color var(--duration-150) var(--ease-apple);
}
.mobile-nav__card-link:hover,
.mobile-nav__card-link:focus-visible,
.mobile-nav__item--card.is-current > .mobile-nav__card-link {
 background-color: var(--color-surface-tertiary);
 border-color: rgba(37, 99, 235, 0.16);
}
.mobile-nav__card-icon-tile {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: var(--radius-md);
 font-size: 1.125rem;
 flex-shrink: 0;
}
.mobile-nav__card-icon-tile--blue {
 background: var(--color-brand-primary);
 color: #ffffff;
}
.mobile-nav__card-icon-tile--purple {
 background: var(--color-accent-violet);
 color: #ffffff;
}
.mobile-nav__card-icon-tile--green,
.mobile-nav__card-icon-tile--emerald {
 background: var(--color-brand-accent);
 color: #ffffff;
}
.mobile-nav__card-icon-tile--amber {
 background: var(--color-accent-amber);
 color: #ffffff;
}
.mobile-nav__card-icon-tile--rose {
 background: #f43f5e;
 color: #ffffff;
}
.mobile-nav__card-icon-tile--indigo {
 background: #6366f1;
 color: #ffffff;
}
.mobile-nav__card-content {
 flex: 1 1 auto;
 min-width: 0;
 display: flex;
 flex-direction: column;
}
.mobile-nav__card-title-row {
 display: flex;
 align-items: center;
 gap: var(--space-1-5);
 line-height: 1.3;
}
.mobile-nav__card-title {
 font-size: 0.8125rem;
 font-weight: var(--weight-medium);
 color: var(--color-text-primary);
}
.mobile-nav__card-badge {
 display: inline-flex;
 align-items: center;
 padding: 1px 5px;
 font-size: 0.625rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 border-radius: var(--radius-full);
 line-height: 1.2;
 background: rgba(37, 99, 235, 0.1);
 color: var(--color-brand-primary);
 border: 1px solid rgba(37, 99, 235, 0.2);
}
.mobile-nav__card-badge--pro {
 background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.12));
 color: var(--color-brand-primary);
 border-color: rgba(37, 99, 235, 0.24);
}
.mobile-nav__card-badge--free {
 background: rgba(5, 150, 105, 0.1);
 color: var(--color-brand-accent);
 border-color: rgba(5, 150, 105, 0.2);
}
.mobile-nav__card-badge--theme {
 background: rgba(217, 119, 6, 0.1);
 color: var(--color-accent-amber);
 border-color: rgba(217, 119, 6, 0.2);
}
.mobile-nav__card-desc {
 margin: 2px 0 0 0;
 font-size: 0.75rem;
 color: var(--color-text-secondary);
 line-height: 1.35;
 white-space: normal;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.mobile-nav__dropdown-shelf {
 display: block;
 margin-top: var(--space-1-5);
 padding-top: var(--space-1);
}
.mobile-nav__dropdown-shelf-link {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: var(--space-2) var(--space-3);
 min-height: 44px;
 border-radius: var(--radius-md);
 background: var(--color-surface-secondary);
 border: 1px solid var(--color-border-subtle);
 font-size: 0.75rem;
 font-weight: var(--weight-semibold);
 color: var(--color-text-secondary);
 text-decoration: none;
 transition: all 150ms var(--ease-apple);
}
.mobile-nav__dropdown-shelf-link:hover,
.mobile-nav__dropdown-shelf-link:focus-visible {
 background: var(--color-surface-tertiary);
 color: var(--color-brand-primary);
 border-color: rgba(37, 99, 235, 0.16);
}
.mobile-nav__footer {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 padding-top: var(--space-4);
 border-top: 1px solid var(--color-border-subtle);
 margin-top: auto;
 flex-shrink: 0;
}
.mobile-nav__footer-row {
 display: flex;
 align-items: center;
 gap: var(--space-2);
}
dialog.search-overlay {
 position: fixed;
 inset: 0;
 width: 100dvw;
 height: 100dvh;
 max-width: 100dvw;
 max-height: 100dvh;
 margin: 0;
 padding: 0;
 border: none;
 background: transparent;
 z-index: var(--z-modal);
 overflow: hidden;
}
dialog.search-overlay:not([open]) {
 display: none;
}
dialog.search-overlay[open] {
 display: flex;
 align-items: flex-start;
 justify-content: center;
 padding-block-start: 15vh;
}
dialog.search-overlay::backdrop {
 background: rgba(15, 23, 42, 0.75);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}
.search-overlay__inner {
 width: 100%;
 max-width: 40rem;
 padding-inline: var(--gutter);
 transform: translateY(-20px);
 opacity: 0;
 transition:
 transform var(--duration-300) var(--ease-out),
 opacity var(--duration-300) var(--ease-out);
 transition-delay: 100ms;
}
dialog.search-overlay[open] .search-overlay__inner,
.search-overlay.is-open .search-overlay__inner {
 transform: translateY(0);
 opacity: 1;
}
@starting-style {
 dialog.search-overlay[open] .search-overlay__inner {
 transform: translateY(-20px);
 opacity: 0;
 }
}
.search-overlay__close {
 position: fixed;
 top: var(--space-6);
 right: var(--space-6);
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.75rem;
 height: 2.75rem;
 min-width: 44px;
 min-height: 44px;
 color: var(--color-text-inverse);
 background-color: rgba(255, 255, 255, 0.15);
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: var(--radius-full);
 cursor: pointer;
 z-index: calc(var(--z-modal) + 10);
 transition: all var(--duration-150) var(--ease-out);
}
.search-overlay__close:hover {
 background-color: rgba(255, 255, 255, 0.3);
 transform: scale(1.08);
}
.search-overlay__close:focus-visible {
 outline: 2px solid var(--color-surface-primary);
 outline-offset: 2px;
}
.search-overlay__close i {
 font-size: 1.25rem;
}
@media (max-width: 768px) {
 .search-overlay__close {
 top: var(--space-4);
 right: var(--space-4);
 }
}
.search-overlay__form {
 margin-block-end: var(--space-6);
}
.search-overlay__field {
 position: relative;
 display: flex;
 align-items: center;
}
.search-overlay__icon {
 position: absolute;
 left: var(--space-5);
 font-size: 1.5rem;
 color: var(--color-text-tertiary);
 pointer-events: none;
}
.search-overlay__input {
 width: 100%;
 padding: var(--space-5) var(--space-16);
 font-size: var(--text-xl);
 color: var(--color-text-primary);
 background-color: var(--color-surface-primary);
 border: 2px solid transparent;
 border-radius: var(--radius-2xl);
 outline: none;
 transition:
 border-color var(--duration-150) var(--ease-out),
 box-shadow var(--duration-150) var(--ease-out);
}
.search-overlay__input:focus {
 border-color: var(--color-brand-primary);
 box-shadow: var(--shadow-glow);
}
.search-overlay__input:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.search-overlay__input::placeholder {
 color: var(--color-text-tertiary);
}
.search-overlay__submit {
 position: absolute;
 right: var(--space-2);
 display: flex;
 align-items: center;
 justify-content: center;
 width: 3rem;
 height: 3rem;
 color: var(--color-text-inverse);
 background: var(--gradient-brand);
 border-radius: var(--radius-xl);
 transition: transform var(--duration-150) var(--ease-out);
}
.search-overlay__submit:hover {
 transform: scale(1.05);
}
.search-overlay__submit:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.search-overlay__submit i {
 font-size: 1.25rem;
}
.search-overlay__quick {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--space-3);
}
.search-overlay__quick-label {
 font-size: var(--text-sm);
 color: var(--color-text-inverse);
 opacity: 0.7;
}
.search-overlay__tags {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
}
.search-tag {
 display: inline-flex;
 align-items: center;
 min-height: 44px;
 padding: var(--space-1-5) var(--space-3);
 font-size: var(--text-sm);
 color: var(--color-text-inverse);
 background-color: rgba(255, 255, 255, 0.1);
 border-radius: var(--radius-full);
 transition:
 background-color var(--duration-150) var(--ease-out),
 transform var(--duration-150) var(--ease-out);
}
.search-tag:hover {
 background-color: rgba(255, 255, 255, 0.2);
 transform: none;
}
html.menu-open,
body.menu-open,
html.search-open,
body.search-open {
 overflow: hidden;
 overscroll-behavior: none;
}
body.menu-open .header__actions {
 opacity: 0;
 pointer-events: none;
}
body.menu-open .site-header .cart-count {
 display: none !important;
}
.mobile-hidden {
 display: none;
}
@media (min-width: 768px) {
 .mobile-hidden {
 display: inline-flex;
 }
}
.header__action--btn {
 display: none;
 align-items: center;
 justify-content: center;
 gap: var(--space-2);
 padding: 0 var(--space-4);
 height: 2.375rem;
 min-height: 38px;
 font-family: var(--font-sans);
 font-size: var(--text-sm);
 font-weight: var(--weight-semibold);
 color: var(--color-text-inverse);
 background-color: var(--color-brand-primary);
 border: 1px solid var(--color-brand-primary);
 border-radius: var(--radius-lg);
 box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
 text-decoration: none;
 white-space: nowrap;
 transition:
 background-color var(--duration-150) var(--ease-out),
 border-color var(--duration-150) var(--ease-out),
 box-shadow var(--duration-150) var(--ease-out);
}
.header__action--btn i {
 font-size: 1.125rem;
 line-height: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
@media (min-width: 768px) {
 .header__action--btn {
 display: inline-flex;
 }
}
.header__action--btn:hover {
 color: var(--color-text-inverse);
 background-color: var(--color-brand-primary-hover);
 border-color: var(--color-brand-primary-hover);
 box-shadow: 0 2px 6px -1px rgba(37, 99, 235, 0.35);
 transform: none;
}
.header__action--btn:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.header__action--btn:active {
 color: var(--color-text-inverse);
 background-color: var(--color-brand-primary-active);
 border-color: var(--color-brand-primary-active);
 box-shadow: inset 0 1px 2px 0 rgba(15, 23, 42, 0.15);
 transform: none;
}
.site-wrapper {
 display: flex;
 flex-direction: column;
 min-height: 100dvh;
}
.site-main,
#main,
main,
.site-content {
 flex: 1 0 auto;
}
.site-footer {
 background: var(--color-surface-inverse);
 border-block-start: 1px solid rgba(255, 255, 255, 0.08);
 color: var(--color-text-inverse-muted);
 position: relative;
 z-index: 10;
}
.footer__main {
 padding-block: var(--space-16) var(--space-14);
}
.footer__grid {
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: var(--space-12);
 align-items: start;
}
.footer__brand {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}
.footer__brand .custom-logo {
 height: 32px;
 width: auto;
 max-width: 185px;
 object-fit: contain;
 display: block;
 margin-block-end: var(--space-4);
}
.site-brand-lockup--footer {
 display: inline-flex;
 align-items: center;
 gap: var(--space-3);
 text-decoration: none;
 margin-block-end: var(--space-4);
}
.site-brand-logo--footer {
 width: 32px;
 height: 32px;
}
.site-brand-name--footer {
 font-family: var(--font-display);
 font-size: var(--text-xl);
 font-weight: var(--weight-bold);
 color: var(--color-text-inverse);
 letter-spacing: -0.02em;
}
.site-brand-accent--footer {
 color: var(--color-accent-sky);
}
.footer__tagline {
 margin: 0 0 var(--space-6);
 font-size: 13px;
 line-height: 1.6;
 color: var(--color-text-inverse-muted);
}
.footer__social {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 8px;
}
.social-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 border-radius: var(--radius-lg);
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.08);
 color: var(--color-text-inverse-muted);
 text-decoration: none;
 transition: all var(--duration-150) var(--ease-out);
}
.social-link:hover {
 background: rgba(var(--color-accent-sky-rgb), 0.15);
 border-color: var(--color-accent-sky);
 color: var(--color-accent-sky);
 transform: none;
 box-shadow: 0 4px 10px -2px rgba(var(--color-accent-sky-rgb), 0.2);
}
.social-link i {
 font-size: 1.15rem;
}
.social-link svg {
 width: 1.15rem;
 height: 1.15rem;
 fill: currentColor;
 display: block;
 flex-shrink: 0;
}
.footer__columns {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--space-8);
}
.footer__column .widget__title {
 margin: 0 0 var(--space-5);
 font-family: var(--font-sans);
 font-size: var(--text-xs);
 font-weight: var(--weight-semibold);
 text-transform: none;
 letter-spacing: normal;
 color: var(--color-text-inverse);
}
.footer__column ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.footer__column ul li {
 line-height: 1.35;
}
.footer__column ul a {
 display: inline-flex;
 align-items: center;
 padding-block: var(--space-2);
 color: var(--color-text-inverse-muted);
 font-size: 13.5px;
 text-decoration: none;
 transition: color var(--duration-150) var(--ease-out);
}
.footer__column ul a:hover {
 color: var(--color-accent-sky);
 transform: none;
}
.footer__status-link {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}
.footer__status-indicator {
 width: 6px;
 height: 6px;
 background: var(--color-success);
 border-radius: 50%;
 box-shadow: 0 0 6px var(--color-success);
 display: inline-block;
}
.footer__bottom {
 background: var(--color-surface-inverse);
 border-block-start: 1px solid rgba(255, 255, 255, 0.06);
 padding-block: var(--space-6);
}
.footer__bottom-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-6);
}
.footer__bottom-left {
 display: flex;
 flex-direction: column;
 gap: 3px;
}
.footer__copyright {
 margin: 0;
 font-size: var(--text-xs);
 color: var(--color-text-inverse-muted);
}
.footer__copyright strong,
.footer__copyright a {
 color: var(--color-text-inverse);
 text-decoration: none;
}
.footer__copyright a:hover {
 color: var(--color-accent-sky);
}
.footer__legal-disclaimer {
 margin: 0;
 font-size: 11px;
 color: var(--color-text-inverse-muted);
 line-height: 1.4;
}
.footer__bottom-right {
 flex-shrink: 0;
}
.footer__payment-security {
 display: flex;
 align-items: center;
 gap: var(--space-4);
}
.footer__payment-label {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: 11px;
 font-weight: var(--weight-semibold);
 color: var(--color-text-inverse-muted);
 text-transform: none;
 letter-spacing: normal;
}
.footer__payment-label i {
 color: var(--color-success);
 font-size: 13px;
}
.footer__payment-badges {
 display: flex;
 align-items: center;
 gap: 6px;
}
.payment-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 8px;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: var(--radius-sm);
 font-size: 10px;
 font-weight: var(--weight-bold);
 letter-spacing: 0.04em;
 color: var(--color-text-inverse);
}
.payment-badge:hover {
 background: rgba(255, 255, 255, 0.1);
 border-color: rgba(255, 255, 255, 0.25);
}
.payment-badge i {
 font-size: 11px;
 color: var(--color-accent-sky);
}
@media (max-width: 1023px) {
 .footer__grid {
 grid-template-columns: 1fr;
 gap: var(--space-10);
 }
 .footer__brand {
 max-width: 100%;
 }
 .footer__columns {
 grid-template-columns: repeat(4, 1fr);
 gap: var(--space-6);
 }
 .footer__bottom-inner {
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-4);
 }
}
@media (max-width: 767px) {
 .footer__main {
 padding-block: var(--space-12) var(--space-10);
 }
 .footer__brand .custom-logo {
 height: 28px;
 max-width: 165px;
 }
 .footer__columns {
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-8) var(--space-5);
 }
 .footer__payment-security {
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-2);
 }
}
@media (max-width: 479px) {
 .footer__columns {
 grid-template-columns: 1fr;
 gap: var(--space-6);
 }
 .footer__payment-badges {
 flex-wrap: wrap;
 }
}
.footer--checkout {
 background: var(--color-surface-inverse) !important;
 border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
 margin-top: auto !important;
}
.footer--checkout .footer__bottom {
 padding: var(--space-5) 0 !important;
}
.footer--checkout .container {
 max-width: 1140px !important;
}
@media (min-width: 992px) {
 .footer--checkout .container {
 padding-inline: 0 !important;
 }
}
.footer--checkout .footer__bottom-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-6);
}
.footer--checkout .footer__copyright {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 margin: 0 !important;
 font-size: var(--text-xs) !important;
 color: var(--color-text-inverse-muted) !important;
}
.footer--checkout .footer__copyright a {
 color: var(--color-text-inverse-muted) !important;
 text-decoration: none !important;
}
.footer--checkout .footer__copyright a:hover {
 color: var(--color-text-inverse) !important;
 text-decoration: underline !important;
}
.footer__checkout-links {
 display: flex;
 align-items: center;
 gap: var(--space-4);
 flex-wrap: wrap;
 margin-block-start: var(--space-1);
}
.footer__checkout-links a {
 font-size: var(--text-xs);
 color: var(--color-text-inverse-muted);
 text-decoration: none;
 transition: color var(--duration-150) var(--ease-out);
}
.footer__checkout-links a:hover {
 color: var(--color-text-inverse);
 text-decoration: underline;
}
@media (max-width: 767px) {
 .footer--checkout .footer__bottom-inner {
 flex-direction: column;
 align-items: flex-start;
 gap: var(--space-4);
 }
}
.site-footer :focus-visible {
 outline: 2px solid var(--color-accent-sky);
 outline-offset: 2px;
}
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-2);
 padding: var(--btn-padding-y) var(--btn-padding-x);
 font-family: var(--font-sans);
 font-size: var(--btn-font-size);
 font-weight: var(--btn-font-weight);
 line-height: 1.25;
 text-align: center;
 text-decoration: none;
 white-space: nowrap;
 max-width: 100%;
 cursor: pointer;
 border: 1px solid transparent;
 border-radius: var(--btn-radius);
 outline: none;
 user-select: none;
 -webkit-user-select: none;
 transition:
 color var(--duration-150) var(--ease-out),
 background-color var(--duration-150) var(--ease-out),
 border-color var(--duration-150) var(--ease-out),
 box-shadow var(--duration-150) var(--ease-out),
 transform 80ms var(--ease-out);
}
.btn:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.btn:disabled,
.btn.is-disabled {
 opacity: 0.5;
 cursor: not-allowed;
 pointer-events: none;
}
.btn br {
 display: none !important;
}
.btn i {
 font-size: 1.125em;
 line-height: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.btn--primary {
 color: var(--color-text-inverse);
 background-color: var(--color-brand-primary);
 border-color: var(--color-brand-primary);
 box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
}
.btn--primary:hover {
 background-color: var(--color-brand-primary-hover);
 border-color: var(--color-brand-primary-hover);
 color: var(--color-text-inverse);
 box-shadow: 0 2px 5px 0 rgba(15, 23, 42, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
}
.btn--primary:active {
 background-color: var(--color-brand-primary-active);
 border-color: var(--color-brand-primary-active);
 transform: translateY(1px);
 box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.12) inset;
}
.btn--secondary {
 color: var(--color-text-primary);
 background-color: var(--color-surface-primary);
 border: 1px solid var(--color-border-strong);
 box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
}
.btn--secondary:hover {
 background-color: var(--color-surface-secondary);
 border-color: var(--color-text-secondary);
 color: var(--color-text-primary);
 box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08);
}
.btn--secondary:active {
 background-color: var(--color-surface-tertiary);
 border-color: var(--color-border-strong);
 transform: translateY(1px);
 box-shadow: inset 0 1px 2px 0 rgba(15, 23, 42, 0.05);
}
.btn--outline {
 color: var(--color-text-primary);
 background-color: transparent;
 border: 1px solid var(--color-border-strong);
}
.btn--outline:hover {
 color: var(--color-text-primary);
 border-color: var(--color-text-secondary);
 background-color: var(--color-surface-secondary);
 box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
}
.btn--outline:active {
 background-color: var(--color-surface-tertiary);
 transform: translateY(1px);
}
.btn--ghost {
 color: var(--color-text-secondary);
 background-color: transparent;
 border: 1px solid transparent;
}
.btn--ghost:hover {
 color: var(--color-text-primary);
 background-color: rgba(15, 23, 42, 0.05);
 border-color: transparent;
}
.btn--ghost:active {
 background-color: rgba(15, 23, 42, 0.08);
 transform: translateY(1px);
}
.btn--xs {
 padding: var(--space-1) var(--space-2-5);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 border-radius: var(--radius-md);
 gap: var(--space-1);
}
.btn--sm {
 padding: var(--space-2) var(--space-3);
 font-size: var(--text-xs);
 border-radius: var(--radius-lg);
 min-height: 38px;
}
@media (max-width: 768px) {
 .btn--sm {
 min-height: 44px;
 }
}
@media (max-width: 768px), (pointer: coarse) {
 .btn--xs,
 .btn--sm {
 min-height: 44px;
 padding-inline: var(--space-3-5);
 }
}
.btn--lg {
 padding: var(--space-4) var(--space-6);
 font-size: var(--text-base);
 border-radius: var(--radius-xl);
}
.btn--full {
 width: 100%;
}
@media (max-width: 480px) {
 .btn {
 white-space: normal;
 overflow-wrap: break-word;
 word-break: break-word;
 }
}
.card {
 position: relative;
 display: flex;
 flex-direction: column;
 background-color: var(--color-surface-primary);
 border-radius: var(--card-radius);
 overflow: hidden;
 transition:
 transform var(--duration-300) var(--ease-fluid),
 box-shadow var(--duration-300) var(--ease-fluid);
}
.card:hover {
 transform: none;
 box-shadow: var(--card-shadow-hover);
}
.card__media {
 position: relative;
 aspect-ratio: 16 / 10; 
 overflow: hidden;
 background-color: var(--color-surface-secondary);
}
.card__media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform var(--duration-500) var(--ease-apple);
}
.card:hover .card__media img {
 transform: scale(1.025);
}
.card__placeholder {
 width: 100%;
 height: 100%;
 min-height: 180px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--color-surface-secondary) 0%, var(--color-surface-tertiary) 100%);
 color: var(--color-text-tertiary);
 transition: background-color var(--duration-300) var(--ease-out);
}
.card__placeholder i {
 font-size: 2.5rem;
 color: var(--color-text-tertiary);
 opacity: 0.6;
 transition: transform var(--duration-300) var(--ease-out), color var(--duration-300) var(--ease-out);
}
.card:hover .card__placeholder i {
 transform: scale(1.1);
 color: var(--color-brand-primary);
 opacity: 0.9;
}
.card__badge {
 position: absolute;
 top: var(--space-3);
 left: var(--space-3);
 padding: var(--space-1) var(--space-2-5);
 font-size: var(--text-xs);
 font-weight: var(--weight-semibold);
 color: var(--color-text-inverse);
 background: var(--gradient-brand);
 border-radius: var(--radius-md);
 z-index: 1;
}
.card__badge--sale {
 background: var(--color-error);
}
.card__badge--new {
 background: var(--color-success);
}
.card__content {
 display: flex;
 flex-direction: column;
 flex: 1;
 padding: var(--card-padding);
}
.card__category {
 margin-block-end: var(--space-2);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 text-transform: none;
 letter-spacing: normal;
 color: var(--color-brand-primary);
}
.card__title {
 margin: 0 0 var(--space-2);
 font-family: var(--font-display);
 font-size: var(--text-lg);
 font-weight: var(--weight-semibold);
 line-height: var(--leading-snug);
 color: var(--color-text-primary);
}
.card__title a {
 color: inherit;
 transition: color var(--duration-150) var(--ease-out);
}
.card__title a:hover {
 color: var(--color-brand-primary);
}
.card__excerpt {
 margin-block-end: var(--space-4);
 font-size: var(--text-sm);
 color: var(--color-text-secondary);
 line-height: var(--leading-relaxed);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.card__meta {
 display: flex;
 align-items: center;
 gap: var(--space-4);
 margin-block-start: auto;
 padding-block-start: var(--space-4);
 border-top: 1px solid var(--color-border-subtle);
 font-size: var(--text-sm);
 color: var(--color-text-secondary);
}
.card__meta-item {
 display: flex;
 align-items: center;
 gap: var(--space-1-5);
}
.card__meta-item i {
 font-size: 1rem;
}
.card__read-more {
 display: inline-flex;
 align-items: center;
 gap: var(--space-1);
 margin-block-start: var(--space-4);
 font-size: var(--text-sm);
 font-weight: var(--weight-semibold);
 color: var(--color-brand-primary);
 text-decoration: none;
 transition: gap var(--duration-200) var(--ease-out);
}
.card__read-more:hover {
 gap: var(--space-2);
}
.card__read-more i {
 font-size: 0.875rem;
 transition: transform var(--duration-200) var(--ease-out);
}
.card__read-more:hover i {
 transform: none;
}
.card--post {
 display: flex;
 flex-direction: column;
 height: 100%;
 background-color: var(--color-surface-primary);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-2xl);
 padding: 0;
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 transition:
 transform var(--duration-300) var(--ease-fluid),
 box-shadow var(--duration-300) var(--ease-fluid),
 border-color var(--duration-300) var(--ease-fluid);
}
.card--post:hover {
 transform: none;
 box-shadow: var(--card-shadow-hover);
 border-color: var(--color-border-card-hover);
}
.card--post .card__media {
 position: relative;
 aspect-ratio: 16 / 9;
 width: 100%;
 overflow: hidden;
 background: radial-gradient(circle at 50% 0%, rgba(var(--color-brand-primary-rgb), 0.08) 0%, var(--color-surface-secondary) 100%);
 display: block;
 border-radius: 0;
 border-bottom: 1px solid var(--color-border-subtle);
}
.card--post .card__media::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 60%, rgba(var(--color-brand-secondary-rgb), 0.2) 100%);
 opacity: 0;
 transition: opacity var(--duration-300) var(--ease-out);
 pointer-events: none;
 z-index: 1;
}
.card--post .card__media img,
.card--post .card__media svg {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform var(--duration-500) var(--ease-apple), filter var(--duration-500) var(--ease-apple);
}
.card--post:hover .card__media::after {
 opacity: 1;
}
.card--post:hover .card__media img,
.card--post:hover .card__media svg {
 transform: scale(1.025);
}
.card--post .card__placeholder {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 min-height: 180px;
 color: var(--color-text-tertiary);
 font-size: 2.5rem;
 background: radial-gradient(circle at 50% 0%, rgba(var(--color-brand-primary-rgb), 0.1) 0%, var(--color-surface-secondary) 100%);
 transition: background-color var(--duration-300) var(--ease-out);
}
.card--post .card__placeholder i {
 font-size: 2.75rem;
 color: var(--color-brand-primary);
 opacity: 0.7;
 transition: transform var(--duration-300) var(--ease-out), opacity var(--duration-300) var(--ease-out);
}
.card--post:hover .card__placeholder i {
 transform: scale(1.1);
 opacity: 1;
}
.card--post .card__content {
 display: flex;
 flex-direction: column;
 flex: 1;
 padding: var(--space-6);
 gap: 0;
}
.card__header-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-2);
 margin-block-end: var(--space-3);
}
.card__category {
 display: inline-flex;
 align-items: center;
 padding: 3px 10px;
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 text-transform: none;
 letter-spacing: normal;
 color: var(--color-brand-primary-hover);
 background: rgba(var(--color-brand-primary-rgb), 0.08);
 border-radius: var(--radius-full);
 text-decoration: none;
 line-height: 1.4;
 transition: background-color var(--duration-150) var(--ease-out), color var(--duration-150) var(--ease-out);
}
.card__category::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-width: 44px;
 min-height: 44px;
}
.card__category:hover {
 background: rgba(var(--color-brand-primary-rgb), 0.16);
 color: var(--color-brand-primary-hover);
}
.card__reading-time {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 color: var(--color-text-secondary);
 line-height: 1;
 white-space: nowrap;
}
.card__reading-time i {
 font-size: var(--text-sm);
 color: var(--color-text-secondary);
}
.card--post .card__title {
 margin: 0 0 var(--space-2-5);
 font-family: var(--font-display);
 font-size: var(--text-lg);
 font-weight: var(--weight-bold);
 line-height: 1.4;
 letter-spacing: -0.015em;
}
.card--post .card__title a,
.card__title a {
 position: relative;
 z-index: 2;
 color: var(--color-text-primary);
 text-decoration: none;
 transition: color var(--duration-200) var(--ease-out);
}
.card--post .card__title a:hover,
.card__title a:hover {
 color: var(--color-brand-primary);
}
.card--post .card__excerpt {
 margin: 0 0 var(--space-5);
 font-size: var(--text-sm);
 line-height: 1.6;
 color: var(--color-text-secondary);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.card__footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-3);
 margin-block-start: auto;
 padding-block-start: var(--space-4);
 border-block-start: 1px solid var(--color-border-subtle);
}
.card__author {
 position: relative;
 z-index: 2;
 display: flex;
 align-items: center;
 gap: var(--space-3);
 min-width: 0;
}
.card__author-img-wrap {
 flex-shrink: 0;
 width: 36px;
 height: 36px;
 border-radius: var(--radius-full);
 overflow: hidden;
 border: 1.5px solid var(--color-border-subtle);
 background: var(--color-surface-secondary);
 display: flex;
 align-items: center;
 justify-content: center;
}
.card__overlay-link {
 position: absolute;
 inset: 0;
 z-index: 1;
 cursor: pointer;
}
.card__author-img {
 width: 100%;
 height: 100%;
 border-radius: var(--radius-full);
 object-fit: cover;
 display: block;
}
.avatar-monogram {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-full);
 background: var(--gradient-brand);
 color: var(--color-text-inverse);
 font-weight: var(--weight-bold);
 line-height: 1;
 letter-spacing: -0.02em;
 user-select: none;
 flex-shrink: 0;
}
.card__author-details {
 display: flex;
 flex-direction: column;
 gap: 1px;
 min-width: 0;
 position: relative;
 z-index: 2;
}
.card__category {
 position: relative;
 z-index: 2;
}
.card__author-name {
 font-size: var(--text-xs);
 font-weight: var(--weight-semibold);
 color: var(--color-text-primary);
 line-height: 1.25;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.card__date {
 font-size: var(--text-xs);
 color: var(--color-text-secondary);
 line-height: 1.2;
 white-space: nowrap;
}
.card__arrow-btn {
 position: relative;
 z-index: 2;
 flex-shrink: 0;
 width: 2rem;
 height: 2rem;
 border-radius: var(--radius-full);
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--color-surface-secondary);
 color: var(--color-text-secondary);
 border: 1px solid var(--color-border-subtle);
 text-decoration: none;
 transition: all var(--duration-200) var(--ease-out);
 font-size: var(--text-sm);
 touch-action: manipulation;
}
.card__arrow-btn::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 44px;
 height: 44px;
 min-width: 44px;
 min-height: 44px;
}
.card__arrow-btn:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.card__arrow-btn:hover {
 background: var(--color-brand-primary);
 color: var(--color-text-inverse);
 border-color: var(--color-brand-primary);
 transform: none;
}
.card--post:hover .card__arrow-btn {
 background: var(--color-brand-primary);
 color: var(--color-text-inverse);
 border-color: var(--color-brand-primary);
 transform: none;
}
.posts-grid {
 display: grid;
 gap: var(--space-6);
}
.posts-grid--2 {
 grid-template-columns: repeat(2, 1fr);
}
.posts-grid--3 {
 grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
 .posts-grid--3 {
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-5);
 }
}
@media (max-width: 479px) {
 .posts-grid--2,
 .posts-grid--3 {
 grid-template-columns: 1fr;
 gap: var(--space-4);
 }
}
.featured__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--space-6);
}
@media (max-width: 1199px) {
 .featured__grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 639px) {
 .featured__grid {
 grid-template-columns: 1fr;
 }
}
.featured-card {
 position: relative;
 display: grid;
 grid-template-rows: auto 1fr;
 background: var(--color-surface-primary);
 border: var(--card-border);
 border-radius: var(--card-radius);
 box-shadow: var(--card-shadow);
 overflow: hidden;
 transition:
 transform var(--duration-200) var(--ease-apple),
 box-shadow var(--duration-200) var(--ease-apple),
 border-color var(--duration-200) var(--ease-apple);
}
.featured-card:hover {
 transform: none;
 box-shadow: var(--card-shadow-hover);
 border-color: var(--color-border-card-hover);
}
.featured-card__media {
 position: relative;
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 1200 / 630;
 align-self: start;
 overflow: hidden;
 background-color: var(--color-surface-secondary);
 border-bottom: 1px solid var(--color-border-subtle);
}
.featured-card__media::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 65%, rgba(var(--color-brand-secondary-rgb), 0.28) 100%);
 opacity: 0;
 transition: opacity var(--duration-300) var(--ease-out);
 pointer-events: none;
 z-index: 2;
}
.featured-card:hover .featured-card__media::after {
 opacity: 1;
}
.featured-card:hover .featured-card__media:has(.featured-card__placeholder)::after {
 opacity: 0;
}
.featured-card__media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 display: block;
 transition:
 transform var(--duration-500) var(--ease-apple),
 filter var(--duration-500) var(--ease-apple);
 z-index: 1;
}
.featured-card:hover .featured-card__media img {
 transform: scale(1.025);
}
.featured-card__placeholder {
 width: 100%;
 height: 100%;
 min-height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--color-surface-secondary) 0%, var(--color-surface-tertiary) 100%);
 color: var(--color-text-tertiary);
 border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 transition: background-color var(--duration-300) var(--ease-out);
}
.featured-card__placeholder i {
 font-size: 3rem;
 color: var(--color-text-tertiary);
 opacity: 0.6;
 transition: transform var(--duration-300) var(--ease-out), color var(--duration-300) var(--ease-out);
}
.featured-card:hover .featured-card__placeholder:not(.featured-card__placeholder--stage) i {
 transform: scale(1.1) rotate(2deg);
 color: var(--color-brand-primary);
 opacity: 0.9;
}
.featured-card__placeholder--stage {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: var(--space-2);
 background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-secondary) 55%, var(--color-surface-tertiary) 100%);
 overflow: hidden;
 padding-bottom: 24px;
}
.featured-card__placeholder--stage::before {
 content: '';
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1.25px, transparent 1.25px);
 background-size: 18px 18px;
 opacity: 0.8;
 pointer-events: none;
 z-index: 0;
}
.featured-card__placeholder--stage::after {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at 50% 42%, var(--stage-ambient, rgba(37, 99, 235, 0.11)) 0%, transparent 68%);
 pointer-events: none;
 z-index: 1;
 transition: opacity var(--duration-300) var(--ease-out);
}
.featured-card:hover .featured-card__placeholder--stage::after {
 opacity: 1.35;
}
.featured-card__stage-squircle {
 position: relative;
 z-index: 2;
 width: 66px;
 height: 66px;
 border-radius: 20px;
 background: linear-gradient(135deg, var(--stage-from, #3b82f6) 0%, var(--stage-to, #2563eb) 100%);
 border: 1px solid rgba(255, 255, 255, 0.5);
 box-shadow: 
 0 1px 2px rgba(15, 23, 42, 0.08),
 0 10px 24px -5px var(--stage-glow, rgba(37, 99, 235, 0.28)),
 inset 0 1px 1px 0 rgba(255, 255, 255, 0.7);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #ffffff;
 transition: box-shadow var(--duration-300) var(--ease-out), border-color var(--duration-300) var(--ease-out);
}
.featured-card:hover .featured-card__stage-squircle {
 transform: none;
 border-color: rgba(255, 255, 255, 0.75);
 box-shadow: 
 0 2px 6px rgba(15, 23, 42, 0.10),
 0 14px 28px -4px var(--stage-glow, rgba(37, 99, 235, 0.42)),
 inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
}
.featured-card__stage-squircle i {
 font-size: 30px;
 color: #ffffff;
 opacity: 1;
 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}
.featured-card__placeholder--stage-blue,
.featured-card__stage-squircle--blue {
 --stage-ambient: rgba(37, 99, 235, 0.11);
 --stage-from: #3b82f6;
 --stage-to: #2563eb;
 --stage-glow: rgba(37, 99, 235, 0.28);
}
.featured-card__placeholder--stage-purple,
.featured-card__stage-squircle--purple {
 --stage-ambient: rgba(139, 92, 246, 0.11);
 --stage-from: #8b5cf6;
 --stage-to: #6366f1;
 --stage-glow: rgba(139, 92, 246, 0.28);
}
.featured-card__placeholder--stage-amber,
.featured-card__stage-squircle--amber {
 --stage-ambient: rgba(245, 158, 11, 0.11);
 --stage-from: #f59e0b;
 --stage-to: #d97706;
 --stage-glow: rgba(245, 158, 11, 0.28);
}
.featured-card__placeholder--stage-emerald,
.featured-card__stage-squircle--emerald,
.featured-card__placeholder--stage-green,
.featured-card__stage-squircle--green {
 --stage-ambient: rgba(16, 185, 129, 0.11);
 --stage-from: #10b981;
 --stage-to: #059669;
 --stage-glow: rgba(16, 185, 129, 0.28);
}
.featured-card__placeholder--stage-rose,
.featured-card__stage-squircle--rose {
 --stage-ambient: rgba(244, 63, 94, 0.11);
 --stage-from: #f43f5e;
 --stage-to: #e11d48;
 --stage-glow: rgba(244, 63, 94, 0.28);
}
.featured-card__placeholder--stage-indigo,
.featured-card__stage-squircle--indigo {
 --stage-ambient: rgba(99, 102, 241, 0.11);
 --stage-from: #6366f1;
 --stage-to: #4f46e5;
 --stage-glow: rgba(99, 102, 241, 0.28);
}
.featured-card__stage-chips {
 position: absolute;
 bottom: 12px;
 left: 0;
 right: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 0 12px;
 z-index: 2;
 pointer-events: none;
 overflow: hidden;
}
.featured-card__stage-chip {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 3px 9px;
 font-size: 11px;
 font-weight: 500;
 line-height: 1.25;
 color: var(--color-text-secondary);
 background: rgba(255, 255, 255, 0.82);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border: 1px solid rgba(15, 23, 42, 0.08);
 border-radius: var(--radius-full);
 box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
 white-space: nowrap;
 max-width: 48%;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
}
.featured-card__stage-chip span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.featured-card__stage-chip i {
 font-size: 12px;
 color: var(--stage-from, var(--color-brand-primary));
 flex-shrink: 0;
}
@media (max-width: 360px) {
 .featured-card__stage-chip:last-child {
 display: none;
 }
 .featured-card__stage-chip {
 max-width: 90%;
 }
}
.featured-card__badge {
 display: none;
}
.featured-card__hover-cue {
 position: absolute;
 top: var(--space-3);
 right: var(--space-3);
 display: inline-flex;
 align-items: center;
 gap: var(--space-1);
 padding: 4px 10px;
 font-size: var(--text-xs);
 font-weight: var(--weight-semibold);
 color: var(--color-text-primary);
 background: rgba(255, 255, 255, 0.92);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid var(--color-border-default);
 border-radius: var(--radius-full);
 box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.10);
 opacity: 0;
 pointer-events: none;
 z-index: 4;
 transition: opacity var(--duration-200) var(--ease-out);
}
.featured-card:hover .featured-card__hover-cue {
 opacity: 1;
}
.featured-card__content {
 display: flex;
 flex-direction: column;
 flex: 1;
 padding: var(--space-5);
}
.featured-card__title {
 margin: 0 0 var(--space-2);
 font-family: var(--font-display);
 font-size: var(--text-xl);
 font-weight: var(--weight-semibold);
 line-height: var(--leading-snug);
}
.featured-card__title a,
.prose .featured-card__title a {
 color: var(--color-text-primary) !important;
 text-decoration: none !important;
 transition: color var(--duration-200) var(--ease-out);
}
.featured-card__title a:hover,
.prose .featured-card__title a:hover {
 color: var(--color-brand-primary) !important;
 text-decoration: none !important;
}
.featured-card__excerpt {
 margin: 0 0 var(--space-4);
 font-size: var(--text-sm);
 color: var(--color-text-secondary);
 line-height: var(--leading-relaxed);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.featured-card__meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--space-2);
 margin-block-end: var(--space-3);
}
.featured-card__meta span {
 display: inline-flex;
 align-items: center;
 gap: var(--space-1-5);
 padding: var(--space-1) var(--space-2-5);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 color: var(--color-text-secondary);
 background: var(--color-surface-secondary);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-full);
}
.featured-card__meta i {
 color: var(--color-brand-primary);
}
.featured-card__meta-sales {
 color: var(--color-success) !important;
 background: var(--color-success-light) !important;
 border-color: rgba(var(--color-brand-accent-rgb), 0.2) !important;
}
.featured-card__meta-sales i {
 color: var(--color-success) !important;
}
.featured-card__specs,
.featured-card__tags,
.featured-card__side-panel {
 display: none;
}
.featured-card__footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 row-gap: var(--space-3);
 column-gap: var(--space-2);
 margin-block-start: auto;
 padding-block-start: var(--space-5);
 border-block-start: 1px solid var(--color-border-subtle);
}
.featured-card__price {
 display: flex;
 align-items: baseline;
 gap: var(--space-1-5);
 min-width: 0;
 flex-shrink: 1;
}
.featured-card__amount {
 font-family: var(--font-display);
 font-size: var(--text-xl);
 font-weight: var(--weight-bold);
 color: var(--color-text-primary);
 line-height: 1;
 white-space: nowrap;
}
.featured-card__billing {
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 color: var(--color-text-secondary);
 text-transform: lowercase;
 line-height: 1;
 white-space: nowrap;
}
.featured-card__price--free .featured-card__amount {
 font-size: var(--text-xl);
 color: var(--color-success);
}
.featured-card__actions {
 display: flex;
 align-items: center;
 flex-shrink: 0;
 gap: var(--space-1-5);
}
.featured-card__actions .btn--sm {
 position: relative;
 padding: var(--space-2) var(--space-3);
 font-size: var(--text-xs);
 gap: var(--space-1);
 white-space: nowrap;
 min-height: 36px;
}
@media (max-width: 768px) {
 .featured-card__actions .btn--sm::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 min-width: 44px;
 min-height: 44px;
 width: 100%;
 height: 100%;
 }
}
.featured-card__actions .btn--sm i {
 font-size: var(--text-sm);
}
.featured-card__actions .btn i {
 transition: transform var(--duration-200) var(--ease-out);
}
.featured-card:hover .featured-card__actions .btn i {
 transform: none;
}
.featured-card__details-link {
 display: inline-flex;
 align-items: center;
 gap: var(--space-1);
 margin-block-start: var(--space-4);
 font-size: var(--text-sm);
 font-weight: var(--weight-semibold);
 color: var(--color-brand-primary);
 text-decoration: none;
}
.featured-card__details-link:hover {
 color: var(--color-brand-secondary);
}
.blog-sidebar__widget.blog-sidebar__widget--promo,
.post-sidebar__widget.post-sidebar__widget--promo,
.post-bottom-promo {
 padding: 0;
 background: var(--color-surface-inverse);
 border: 1px solid var(--color-border-dark-subtle);
 border-radius: var(--radius-2xl);
 box-shadow: var(--shadow-xl);
 overflow: hidden;
 transition: transform var(--duration-200) var(--ease-apple),
 border-color var(--duration-200) var(--ease-apple),
 box-shadow var(--duration-200) var(--ease-apple);
}
.pill-badge {
 display: inline-flex;
 align-items: center;
 gap: var(--space-1-5);
 padding: var(--space-1) var(--space-2-5);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 line-height: 1.35;
 letter-spacing: 0;
 text-transform: none;
 border-radius: var(--radius-full);
 border: 1px solid var(--color-border-subtle);
 background-color: var(--color-surface-tertiary);
 color: var(--color-text-secondary);
}
.pill-badge--primary {
 background-color: rgba(var(--color-brand-primary-rgb), 0.06);
 border-color: rgba(var(--color-brand-primary-rgb), 0.15);
 color: var(--color-brand-primary-hover);
}
.pill-badge--success {
 background-color: var(--color-success-light);
 border-color: rgba(var(--color-success-rgb), 0.2);
 color: var(--color-success);
}
.b2b-card {
 background-color: var(--color-surface-primary);
 border: 1px solid var(--color-border-card);
 border-radius: var(--radius-xl);
 box-shadow: 0 1px 3px rgba(var(--color-brand-secondary-rgb), 0.04), 0 1px 2px rgba(var(--color-brand-secondary-rgb), 0.02);
 transition: transform var(--duration-200) var(--ease-apple),
 box-shadow var(--duration-200) var(--ease-apple),
 border-color var(--duration-200) var(--ease-apple);
}
.b2b-card:hover {
 transform: none;
 border-color: var(--color-border-card-hover);
 box-shadow: 0 10px 25px -5px rgba(var(--color-brand-secondary-rgb), 0.08), 0 4px 6px -2px rgba(var(--color-brand-secondary-rgb), 0.03);
}
.row-center {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.item-center {
 display: inline-flex;
 align-items: center;
}
.form-group {
 margin-block-end: var(--space-5);
}
.form-label {
 display: block;
 margin-block-end: var(--space-2);
 font-size: var(--text-sm);
 font-weight: var(--weight-medium);
 color: var(--color-text-primary);
}
.form-label--required::after {
 content: ' *';
 color: var(--color-error);
}
.form-input,
.form-select,
.form-textarea {
 display: block;
 width: 100%;
 padding: var(--input-padding-y) var(--input-padding-x);
 font-family: var(--font-sans);
 font-size: var(--text-base);
 font-weight: var(--weight-regular);
 line-height: var(--leading-normal);
 color: var(--color-text-primary);
 background-color: var(--input-bg);
 border: 1px solid var(--color-border-default);
 border-radius: var(--input-radius);
 outline: none;
 transition:
 border-color var(--duration-200) var(--ease-out),
 box-shadow var(--duration-200) var(--ease-out),
 background-color var(--duration-200) var(--ease-out);
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
 border-color: var(--color-border-strong);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
 outline: none;
 border-color: var(--color-brand-primary);
 box-shadow: 0 0 0 3px rgba(var(--color-brand-primary-rgb), 0.12);
}
.form-input::placeholder,
.form-textarea::placeholder {
 color: var(--color-text-tertiary);
}
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
 border-color: var(--color-error);
}
.form-input.is-error:focus,
.form-select.is-error:focus,
.form-textarea.is-error:focus {
 box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.form-error {
 display: flex;
 align-items: center;
 gap: var(--space-1-5);
 margin-block-start: var(--space-1-5);
 font-size: var(--text-xs);
 font-weight: var(--weight-medium);
 color: var(--color-error);
}
.form-error i {
 font-size: 0.875rem;
 flex-shrink: 0;
}
.form-input.is-success,
.form-select.is-success,
.form-textarea.is-success {
 border-color: var(--color-success);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
 opacity: 0.6;
 background-color: var(--color-surface-secondary);
 cursor: not-allowed;
}
.form-textarea {
 min-height: 8rem;
 resize: vertical;
}
.form-select {
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23475569' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right var(--space-3) center;
 background-size: 1rem;
 padding-inline-end: var(--space-10);
 cursor: pointer;
}
.nav--primary {
 display: flex;
 align-items: center;
 gap: 6px;
}
.nav__item {
 position: relative;
}
.nav__link {
 position: relative;
 display: flex;
 align-items: center;
 gap: 5px;
 padding: 7px 13px;
 font-size: var(--text-sm);
 font-weight: var(--weight-medium);
 letter-spacing: -0.01em;
 color: var(--color-text-secondary);
 border-radius: var(--radius-lg);
 border: 1px solid transparent;
 transition:
 color var(--duration-150) var(--ease-apple),
 background-color var(--duration-150) var(--ease-apple);
}
.nav--primary > .nav__item > .nav__link:hover,
.nav--primary > .nav__item.is-open > .nav__link {
 color: var(--color-text-primary);
 background-color: var(--color-surface-tertiary);
}
.nav--primary > .nav__item.is-current > .nav__link {
 color: var(--color-brand-primary);
 font-weight: var(--weight-semibold);
 background-color: rgba(37, 99, 235, 0.07);
 border-color: transparent;
 box-shadow: none;
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
}
.nav--primary > .nav__item.is-current > .nav__link:hover,
.nav--primary > .nav__item.is-current.is-open > .nav__link {
 background-color: rgba(37, 99, 235, 0.12);
 color: var(--color-brand-primary-hover);
}
.nav--primary > .nav__item.is-current > .nav__link .nav__icon {
 color: var(--color-brand-primary);
 opacity: 0.85;
}
.nav__link:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.nav__icon {
 display: inline-block;
 font-size: 0.6875rem;
 color: var(--color-text-tertiary);
 opacity: 0.65;
 transform-origin: 50% 50%;
 transition:
 transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
 color 150ms ease,
 opacity 150ms ease;
}
.nav__item.is-open > .nav__link .nav__icon,
.nav__item--has-children:hover > .nav__link .nav__icon {
 transform: rotate(180deg);
 color: var(--color-brand-primary);
 opacity: 0.9;
}
.nav__submenu {
 position: absolute;
 top: calc(100% + 10px);
 left: 50%;
 z-index: var(--z-dropdown, 100);
 width: 396px;
 max-width: 92vw;
 padding: 8px;
 background: rgba(255, 255, 255, 0.98);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid rgba(15, 23, 42, 0.08);
 border-radius: 18px;
 box-shadow:
 0 0 0 1px rgba(255, 255, 255, 0.9) inset,
 0 4px 6px -1px rgba(15, 23, 42, 0.04),
 0 12px 24px -4px rgba(15, 23, 42, 0.08),
 0 24px 48px -12px rgba(15, 23, 42, 0.12);
 list-style: none;
 margin: 0;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translate3d(-50%, 0, 0);
 transform-origin: top center;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 transition:
 opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
 visibility 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__submenu::before {
 content: '';
 position: absolute;
 top: -14px;
 left: 0;
 right: 0;
 height: 14px;
 background: transparent;
 display: block;
}
.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children.is-open > .nav__submenu {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translate3d(-50%, 0, 0);
 transition:
 opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
 visibility 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__submenu .nav__item {
 display: block;
 margin: 0 0 3px 0;
 padding: 0;
}
.nav__submenu .nav__item--card:last-of-type {
 margin-bottom: 5px;
}
.nav__submenu .nav__link {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 padding: 9px 14px;
 font-size: var(--text-sm);
 font-weight: var(--weight-medium);
 color: var(--color-text-primary);
 border-radius: 12px;
 border: 1px solid transparent;
 text-decoration: none;
 transition:
 color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 background-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 border-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__submenu .nav__link:hover,
.nav__submenu .nav__link:focus-visible {
 color: var(--color-brand-primary);
 background-color: var(--color-surface-secondary);
 border-color: rgba(37, 99, 235, 0.12);
 transform: none;
}
.nav__card-link {
 position: relative;
 display: flex;
 align-items: flex-start;
 gap: 13px;
 padding: 10px 12px;
 border-radius: 12px;
 border: 1px solid transparent;
 text-decoration: none;
 background: transparent;
 transition:
 background-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 border-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1),
 transform 100ms ease;
 outline: none;
 contain: content;
}
.nav__card-link:hover,
.nav__card-link:focus-visible,
.nav__item--card.is-current > .nav__card-link {
 background-color: var(--color-surface-secondary);
 border-color: rgba(15, 23, 42, 0.05);
 box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.nav__card-link:active {
 transform: scale(0.995);
 background-color: var(--color-surface-tertiary);
}
.nav__card-link:focus-visible {
 outline: 2px solid var(--color-brand-primary);
 outline-offset: 2px;
}
.nav__card-icon-tile {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: var(--icon-tile-sm);
 height: var(--icon-tile-sm);
 border-radius: var(--icon-radius);
 font-size: 1.3rem;
 flex-shrink: 0;
 margin-top: 1px;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(15, 23, 42, 0.03);
 transition:
 background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
 border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
 color 160ms cubic-bezier(0.16, 1, 0.3, 1),
 box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
 transform: none !important;
 contain: strict;
}
.nav__card-icon-tile--blue {
 background: var(--color-brand-primary);
 border: 1px solid rgba(255, 255, 255, 0.2);
 color: #ffffff;
 box-shadow: 0 3px 8px -1px rgba(37, 99, 235, 0.32);
}
.nav__card-icon-tile--purple {
 background: var(--color-accent-violet);
 border: 1px solid rgba(255, 255, 255, 0.2);
 color: #ffffff;
 box-shadow: 0 3px 8px -1px rgba(124, 58, 237, 0.32);
}
.nav__card-icon-tile--green,
.nav__card-icon-tile--emerald {
 background: var(--color-brand-accent);
 border: 1px solid rgba(255, 255, 255, 0.2);
 color: #ffffff;
 box-shadow: 0 3px 8px -1px rgba(5, 150, 105, 0.32);
}
.nav__card-icon-tile--amber {
 background: var(--color-accent-amber);
 border: 1px solid rgba(255, 255, 255, 0.2);
 color: #ffffff;
 box-shadow: 0 3px 8px -1px rgba(217, 119, 6, 0.32);
}
.nav__card-icon-tile--rose {
 background: #f43f5e;
 border: 1px solid rgba(255, 255, 255, 0.2);
 color: #ffffff;
 box-shadow: 0 3px 8px -1px rgba(244, 63, 94, 0.32);
}
.nav__card-icon-tile--indigo {
 background: #6366f1;
 border: 1px solid rgba(255, 255, 255, 0.2);
 color: #ffffff;
 box-shadow: 0 3px 8px -1px rgba(99, 102, 241, 0.32);
}
.nav__card-link:hover .nav__card-icon-tile,
.nav__card-link:focus-visible .nav__card-icon-tile {
 transform: none !important;
}
.nav__card-link:hover .nav__card-icon-tile--blue,
.nav__card-link:focus-visible .nav__card-icon-tile--blue {
 background: var(--color-brand-primary-hover);
 box-shadow: 0 6px 14px -2px rgba(37, 99, 235, 0.45);
}
.nav__card-link:hover .nav__card-icon-tile--purple,
.nav__card-link:focus-visible .nav__card-icon-tile--purple {
 background: #6d28d9;
 box-shadow: 0 6px 14px -2px rgba(124, 58, 237, 0.45);
}
.nav__card-link:hover .nav__card-icon-tile--green,
.nav__card-link:focus-visible .nav__card-icon-tile--green,
.nav__card-link:hover .nav__card-icon-tile--emerald,
.nav__card-link:focus-visible .nav__card-icon-tile--emerald {
 background: #047857;
 box-shadow: 0 6px 14px -2px rgba(5, 150, 105, 0.45);
}
.nav__card-link:hover .nav__card-icon-tile--amber,
.nav__card-link:focus-visible .nav__card-icon-tile--amber {
 background: #b45309;
 box-shadow: 0 6px 14px -2px rgba(217, 119, 6, 0.45);
}
.nav__card-link:hover .nav__card-icon-tile--rose,
.nav__card-link:focus-visible .nav__card-icon-tile--rose {
 background: #e11d48;
 box-shadow: 0 6px 14px -2px rgba(225, 29, 72, 0.45);
}
.nav__card-link:hover .nav__card-icon-tile--indigo,
.nav__card-link:focus-visible .nav__card-icon-tile--indigo {
 background: #4f46e5;
 box-shadow: 0 6px 14px -2px rgba(79, 70, 229, 0.45);
}
.nav__card-content {
 flex: 1 1 auto;
 min-width: 0;
 display: flex;
 flex-direction: column;
}
.nav__card-title-row {
 display: flex;
 align-items: center;
 gap: 8px;
 line-height: 1.3;
 margin-bottom: 2px;
}
.nav__card-title {
 font-family: var(--font-display, var(--font-sans));
 font-size: 14.5px;
 font-weight: 600;
 letter-spacing: -0.015em;
 color: #0f172a;
 transition: color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__card-link:hover .nav__card-title,
.nav__card-link:focus-visible .nav__card-title,
.nav__item--card.is-current .nav__card-title {
 color: var(--color-brand-primary);
}
.nav__card-badge {
 display: inline-flex;
 align-items: center;
 padding: 1px 6px;
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.03em;
 text-transform: uppercase;
 border-radius: 6px;
 line-height: 1.3;
 background: #f1f5f9;
 color: #475569;
 border: 1px solid #e2e8f0;
 transition:
 background-color 140ms ease,
 border-color 140ms ease,
 color 140ms ease;
}
.nav__card-badge--erp,
.nav__card-badge--pro {
 background: #eff6ff;
 color: #2563eb;
 border-color: rgba(37, 99, 235, 0.18);
}
.nav__card-badge--hr {
 background: #faf5ff;
 color: #7c3aed;
 border-color: rgba(124, 58, 237, 0.18);
}
.nav__card-badge--free,
.nav__card-badge--new {
 background: #ecfdf5;
 color: #059669;
 border-color: rgba(5, 150, 105, 0.18);
}
.nav__card-badge--blog,
.nav__card-badge--agency {
 background: #fffbeb;
 color: #d97706;
 border-color: rgba(217, 119, 6, 0.18);
}
.nav__card-badge--hot,
.nav__card-badge--sale,
.nav__card-badge--rose {
 background: #fff1f2;
 color: #e11d48;
 border-color: rgba(225, 29, 72, 0.18);
}
.nav__card-badge--popular,
.nav__card-badge--featured,
.nav__card-badge--indigo {
 background: #eef2ff;
 color: #4f46e5;
 border-color: rgba(79, 70, 229, 0.18);
}
.nav__card-link:hover .nav__card-badge--erp,
.nav__card-link:hover .nav__card-badge--pro {
 background: #dbeafe;
 border-color: rgba(37, 99, 235, 0.3);
 color: #1d4ed8;
}
.nav__card-link:hover .nav__card-badge--hr {
 background: #f3e8ff;
 border-color: rgba(124, 58, 237, 0.3);
 color: #6d28d9;
}
.nav__card-link:hover .nav__card-badge--free,
.nav__card-link:hover .nav__card-badge--new {
 background: #d1fae5;
 border-color: rgba(5, 150, 105, 0.3);
 color: #047857;
}
.nav__card-link:hover .nav__card-badge--hot,
.nav__card-link:hover .nav__card-badge--sale,
.nav__card-link:hover .nav__card-badge--rose {
 background: #ffe4e6;
 border-color: rgba(225, 29, 72, 0.3);
 color: #be123c;
}
.nav__card-link:hover .nav__card-badge--popular,
.nav__card-link:hover .nav__card-badge--featured,
.nav__card-link:hover .nav__card-badge--indigo {
 background: #e0e7ff;
 border-color: rgba(79, 70, 229, 0.3);
 color: #4338ca;
}
.nav__card-desc {
 margin: 0;
 font-size: 13px;
 color: #64748b;
 line-height: 1.45;
 font-weight: 400;
 white-space: normal;
}
.nav__dropdown-shelf,
.nav__dropdown-footer {
 display: block;
 margin: 5px -8px -8px -8px;
 padding: 0;
 border-top: 1px solid rgba(15, 23, 42, 0.06);
 border-bottom-left-radius: 17px;
 border-bottom-right-radius: 17px;
 overflow: hidden;
 background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.nav__dropdown-shelf-link,
.nav__dropdown-footer-link {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 11px 14px;
 text-decoration: none;
 transition:
 background-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
 outline: none;
}
.nav__dropdown-shelf-title {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: -0.01em;
 color: #0f172a;
 transition: color 140ms ease;
}
.nav__dropdown-shelf-badge {
 display: inline-flex;
 align-items: center;
 padding: 2px 7px;
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.02em;
 border-radius: var(--radius-full);
 background: rgba(37, 99, 235, 0.08);
 color: var(--color-brand-primary-hover);
 border: 1px solid rgba(37, 99, 235, 0.14);
 transition:
 background-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 border-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
 box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1),
 transform 100ms ease;
}
.nav__dropdown-shelf-link:hover,
.nav__dropdown-shelf-link:focus-visible,
.nav__dropdown-footer-link:hover,
.nav__dropdown-footer-link:focus-visible {
 background: var(--color-surface-secondary);
}
.nav__dropdown-shelf-link:hover .nav__dropdown-shelf-title,
.nav__dropdown-shelf-link:focus-visible .nav__dropdown-shelf-title {
 color: var(--color-brand-primary);
}
.nav__dropdown-shelf-link:hover .nav__dropdown-shelf-badge,
.nav__dropdown-shelf-link:focus-visible .nav__dropdown-shelf-badge {
 background: var(--color-brand-primary);
 color: #ffffff;
 border-color: var(--color-brand-primary);
 box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.nav__dropdown-shelf-link:active .nav__dropdown-shelf-badge {
 transform: scale(0.96);
}
@media (prefers-reduced-motion: reduce) {
 .nav__card-link,
 .nav__card-icon-tile,
 .nav__card-title,
 .nav__card-badge,
 .nav__dropdown-shelf-link,
 .nav__dropdown-shelf-title,
 .nav__dropdown-shelf-badge,
 .nav__icon {
 transition-duration: 0.01ms !important;
 animation-duration: 0.01ms !important;
 transform: none !important;
 }
 .nav__submenu {
 transition-duration: 0.01ms !important;
 animation-duration: 0.01ms !important;
 transform: translate3d(-50%, 0, 0) !important;
 }
 .nav__submenu--mega {
 transform: none !important;
 }
}
.nav__submenu--mega {
 left: 0;
 right: 0;
 transform: none;
 width: 100%;
 max-width: var(--container-lg);
 margin-inline: auto;
}
.nav__item--has-children:hover > .nav__submenu--mega,
.nav__item--has-children.is-open > .nav__submenu--mega {
 transform: none;
}
.nav__submenu--mega .nav__columns {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--space-6);
 padding: var(--space-6);
}
.nav__column-title {
 display: block;
 margin-block-end: var(--space-3);
 padding-block-end: var(--space-2);
 font-size: var(--text-xs);
 font-weight: var(--weight-semibold);
 text-transform: uppercase;
 letter-spacing: var(--tracking-wide);
 color: var(--color-text-tertiary);
 border-bottom: 1px solid var(--color-border-subtle);
}