/**
 * FAK LAB - Homepage Styles (Brand New Design)
 * Modern, Clean, High-Performance
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES & THEME
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Colors - Light Theme */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme="dark"] {
    --primary: #818cf8;
    --primary-dark: #6366f1;
    --primary-light: #a5b4fc;
    
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    
    --border-color: #334155;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.main-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.brand-logo-img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
}

.brand-title {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9375rem;
}

.nav-link:hover {
    color: var(--primary);
    background: var(--bg-secondary);
}

.nav-link.active {
    color: var(--primary);
    background: var(--bg-secondary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-switcher-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.theme-switcher-btn:hover {
    color: var(--primary);
    background: var(--bg-tertiary);
}

.mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font-size: 1.25rem;
}

.mobile-menu-btn:hover {
    color: var(--primary);
    background: var(--bg-tertiary);
}

/* Mobile Menu */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-close {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    margin-bottom: 2rem;
    font-size: 1.25rem;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-menu-link {
    padding: 1rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mobile-menu-link:hover {
    color: var(--primary);
    background: var(--bg-secondary);
}

.mobile-menu-link.active {
    color: var(--primary);
    background: var(--bg-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-section {
    position: relative;
    padding: 6rem 1.5rem 4rem;
    overflow: hidden;
}

.hero-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-secondary);
    margin-bottom: 3rem;
    line-height: 1.6;
}

.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: #4b5563;
    margin-top: 0.25rem;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 0.875rem 2rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.cta-btn.primary {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.cta-btn.primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.cta-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.cta-btn.secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--primary);
}

/* Hero Background Animation */
.hero-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.bg-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.04;
    animation: float 20s infinite ease-in-out;
}

.circle-1 {
    width: 300px;
    height: 300px;
    background: var(--primary);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.circle-2 {
    width: 400px;
    height: 400px;
    background: var(--secondary);
    bottom: -150px;
    right: -150px;
    animation-delay: 5s;
}

.circle-3 {
    width: 200px;
    height: 200px;
    background: var(--success);
    top: 50%;
    right: 10%;
    animation-delay: 10s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH & FILTER SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.search-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.search-container {
    max-width: 1200px;
    margin: 0 auto;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
}

.search-box {
    position: relative;
    max-width: none;
    margin: 0;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    cursor: pointer;
}

.search-clear:hover {
    color: var(--danger);
    background: var(--bg-secondary);
}

/* Filter Toggle Button */
.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-xl);
    border: 1.5px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.filter-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-toggle-btn[aria-expanded="true"] {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

/* Collapsible Filter Panel */
.filter-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
    margin-top: 0;
}

.filter-panel.open {
    max-height: 200px;
    opacity: 1;
    overflow-y: auto;
    margin-top: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.filter-panel::-webkit-scrollbar {
    width: 4px;
}

.filter-panel::-webkit-scrollbar-track {
    background: transparent;
}

.filter-panel::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.filter-chips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.25rem 0;
}

.filter-chip {
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.8rem;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.tools-section {
    padding: 4rem 1.5rem;
}

.tools-container {
    max-width: 1400px;
    margin: 0 auto;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
}

.tool-card-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    will-change: transform;
}

.tool-card-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.tool-icon-box {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.tool-icon-box img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tool-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.tool-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Loading State */
.loading-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 1rem;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* No Results State */
.no-results-state {
    text-align: center;
    padding: 4rem 1rem;
}

.no-results-state i {
    font-size: 4rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.no-results-state h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.no-results-state p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.reset-btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: white;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.reset-btn:hover {
    background: var(--primary-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.main-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 4rem 1.5rem 2rem;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand {
    grid-column: span 1;
}

.footer-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.footer-brand h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.footer-links-group h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-links-group a {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
}

.footer-links-group a:hover {
    color: var(--primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.footer-tagline {
    color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.fab-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 999;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.fab-button:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.fab-button.active {
    transform: rotate(45deg);
}

.fab-menu {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 998;
}

.fab-menu-item {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.3s forwards;
}

.fab-menu-item:nth-child(1) { animation-delay: 0.1s; }
.fab-menu-item:nth-child(2) { animation-delay: 0.2s; }
.fab-menu-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fab-menu-item:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .hero-section {
        padding: 4rem 1.5rem 3rem;
    }
    
    .hero-stats {
        gap: 1.5rem;
    }
    
    .stat-divider {
        display: none;
    }
    
    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
    
    .tool-card-item {
        padding: 1rem;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .fab-button {
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .fab-menu {
        bottom: 5rem;
        right: 1.5rem;
    }
}

@media (max-width: 480px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   2026 TOOL DISCOVERY REDESIGN
   ========================================================================== */
:root {
    --home-max: 1440px;
    --home-accent: #6d4aff;
    --home-accent-2: #e548a8;
    --home-surface: #ffffff;
    --home-soft: #f7f7fc;
    --home-ink: #111827;
    --home-muted: #596579;
    --home-line: #e4e7ef;
}
[data-bs-theme="dark"] {
    --home-surface: #111827;
    --home-soft: #0d1322;
    --home-ink: #f5f7ff;
    --home-muted: #a8b1c3;
    --home-line: #344159;
}

.hero-section {
    padding: 5.25rem 0 0;
    background: var(--home-soft);
    border-bottom: 1px solid var(--home-line);
    overflow: hidden;
}
.hero-container {
    max-width: var(--home-max);
    min-height: 450px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    align-items: stretch;
    text-align: left;
}
.hero-copy {
    padding: 3.3rem 3.5rem 2.6rem 0;
    align-self: center;
}
.section-tag {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    color: var(--home-ink);
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: .035em;
}
.hero-title {
    max-width: 650px;
    margin: 0 0 1rem;
    color: var(--home-ink);
    font-size: clamp(3rem, 5.25vw, 5.3rem);
    line-height: .98;
    letter-spacing: -.055em;
}
.hero-subtitle {
    max-width: 590px;
    margin: 0 0 1.55rem;
    color: var(--home-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}
.hero-search {
    width: min(100%, 650px);
    height: 66px;
    padding: 6px 7px 6px 20px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    background: var(--home-surface);
    border: 1.5px solid #7961ff;
    border-right-color: #e263ad;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(71, 55, 150, .12);
}
.hero-search:focus-within { box-shadow: 0 0 0 4px rgba(109, 74, 255, .14), 0 12px 30px rgba(71, 55, 150, .14); }
.hero-search > i { color: var(--home-muted); font-size: 1.25rem; }
.hero-search input {
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: var(--home-ink);
    background: transparent;
    font-size: .98rem;
}
.hero-search input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
.hero-search-btn {
    height: 50px;
    padding: 0 1.65rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--home-accent), var(--home-accent-2));
    color: #fff;
    font-weight: 750;
    cursor: pointer;
}
.search-clear { position: static; transform: none; border: 0; background: transparent; color: var(--home-muted); }
.hero-trust {
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem 1.4rem;
    color: var(--home-muted);
    font-size: .78rem;
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.hero-trust i { color: var(--home-accent); font-size: 1rem; }
.hero-visual {
    min-width: 0;
    background: #121522;
    overflow: hidden;
}
.hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 52%; }

.recent-section { background: var(--home-surface); border-bottom: 1px solid var(--home-line); }
.recent-container {
    max-width: var(--home-max);
    min-height: 78px;
    margin: 0 auto;
    padding: .7rem 2rem;
    display: grid;
    grid-template-columns: 165px 1fr auto;
    align-items: center;
    gap: 1.2rem;
}
.recent-label { display: flex; gap: .65rem; align-items: center; color: var(--home-ink); font-size: .86rem; font-weight: 750; }
.recent-label i { color: var(--home-accent); }
.recent-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recent-tool {
    min-width: 0;
    padding: .25rem 1.35rem;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    color: var(--home-ink);
    border-left: 1px solid var(--home-line);
    text-decoration: none;
}
.recent-tool img { width: 38px; height: 38px; padding: 5px; object-fit: contain; border: 1px solid var(--home-line); border-radius: 9px; background: var(--home-soft); }
.recent-tool strong, .recent-tool small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.recent-tool strong { font-size: .82rem; }
.recent-tool small { margin-top: 2px; color: var(--home-accent); font-size: .69rem; }
.recent-clear { border: 0; background: transparent; color: var(--home-accent); font-size: .78rem; cursor: pointer; white-space: nowrap; }

.search-section { padding: .85rem 1.5rem; background: var(--home-surface); border-bottom: 1px solid var(--home-line); }
.search-container { max-width: var(--home-max); }
.library-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quick-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.quick-tab {
    min-height: 40px;
    padding: .55rem 1rem;
    flex: 0 0 auto;
    color: var(--home-muted);
    border: 1px solid var(--home-line);
    border-radius: 9px;
    background: transparent;
    font-size: .78rem;
    font-weight: 650;
}
.quick-tab.active { color: var(--home-accent); border-color: #927fff; background: rgba(109, 74, 255, .06); }
.latest-tab { display: inline-flex; align-items: center; gap: .45rem; }
.sort-control { display: flex; align-items: center; gap: .5rem; color: var(--home-muted); font-size: .75rem; white-space: nowrap; }
.sort-control select { height: 40px; padding: 0 2.2rem 0 .85rem; color: var(--home-ink); background: var(--home-surface); border: 1px solid var(--home-line); border-radius: 9px; }
.filter-panel { display: none; }

.tools-section { padding: 1.3rem 1.5rem 4rem; background: var(--home-surface); }
.tools-container { max-width: var(--home-max); }
.tools-section-header { display: none; }
.tools-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.tool-card-item {
    position: relative;
    min-width: 0;
    min-height: 148px;
    padding: 14px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    text-align: left;
    color: var(--home-ink);
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: 13px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--home-line) 38%, transparent), 0 3px 10px rgba(17, 24, 39, .055);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tool-card-item:hover { transform: translateY(-3px); border-color: #8f7cff; background: color-mix(in srgb, var(--home-surface) 96%, var(--home-accent)); box-shadow: inset 0 0 0 1px rgba(143,124,255,.28), 0 12px 28px rgba(49,39,105,.14); }
.tool-card-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--home-accent) 42%, transparent); outline-offset: 3px; border-color: var(--home-accent); }
.tool-icon-box { grid-row: 1 / span 2; width: 50px; height: 50px; border-radius: 10px; background: var(--home-soft); border: 1px solid var(--home-line); }
.tool-icon-box img { width: 38px; height: 38px; }
.tool-title { align-self: center; min-width: 0; color: var(--home-ink); font-size: .88rem; line-height: 1.25; font-weight: 750; }
.tool-desc {
    grid-column: 2;
    margin: 0;
    color: var(--home-muted);
    font-size: .73rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.tool-category { grid-column: 1 / 2; align-self: end; justify-self: start; max-width: 100%; padding: .22rem .5rem; color: var(--home-accent); background: rgba(109, 74, 255, .09); font-size: .63rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-launch-btn { grid-column: 2; align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .5rem; border: 1px solid color-mix(in srgb, var(--home-accent) 28%, transparent); border-radius: 8px; color: var(--home-accent); background: color-mix(in srgb, var(--home-accent) 7%, transparent); font-size: .72rem; font-weight: 750; }
.tool-card-item[data-new="true"]::after { content: "NEW"; position: absolute; top: 7px; right: 7px; padding: 2px 6px; color: #d72b7b; background: #fff1f8; border: 1px solid #ffadd3; border-radius: 999px; font-size: .55rem; font-weight: 800; }
.tool-card-item[hidden] { display: none !important; }

.footer-brand a { color: inherit; }
.noscript-note { padding: .8rem; color: var(--home-muted); text-align: center; }
.hero-title-mobile, .mobile-list-header { display: none; }

/* Founder authority and product ecosystem */
.authority-section{padding:clamp(3.5rem,7vw,7rem) 1.5rem;background:var(--bg-secondary);border-block:1px solid var(--border-subtle)}
.authority-shell{max-width:1400px;margin:0 auto}
.authority-intro{max-width:920px}
.authority-kicker{margin:0 0 1rem;color:var(--primary);font:700 .78rem/1.2 var(--font-mono);letter-spacing:.16em}
.authority-intro h2{margin:0 0 1.2rem;color:var(--text-primary);font-size:clamp(2rem,4vw,4.2rem);line-height:1.02;letter-spacing:-.045em}
.authority-intro>p:not(.authority-kicker){max-width:850px;color:var(--text-secondary);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.75}
.authority-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.8rem 0 2.4rem}
.authority-actions a{display:inline-flex;align-items:center;gap:.55rem;padding:.82rem 1rem;border:1px solid var(--border-color);border-radius:.8rem;background:var(--bg-card);color:var(--text-primary);font-weight:700;text-decoration:none;transition:.2s ease}
.authority-actions a:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.ecosystem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ecosystem-grid a{min-height:150px;padding:1.35rem;border:1px solid var(--border-color);border-radius:1rem;background:var(--bg-card);color:var(--text-primary);text-decoration:none;box-shadow:var(--shadow-card);transition:.22s ease}
.ecosystem-grid a:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-glow)}
.ecosystem-grid strong{display:block;margin-bottom:.55rem;font-size:1.05rem}
.ecosystem-grid span{display:block;color:var(--text-secondary);font-size:.9rem;line-height:1.55}
.social-proof-links{display:flex;flex-wrap:wrap;gap:.7rem 1.35rem;margin-top:1.8rem}
.social-proof-links a{color:var(--text-secondary);font-size:.9rem;font-weight:650;text-underline-offset:4px}
.social-proof-links a:hover{color:var(--primary)}
@media(max-width:1050px){.ecosystem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.authority-section{padding:3rem 1rem}.authority-intro h2{font-size:2.2rem}.authority-actions{display:grid}.authority-actions a{justify-content:space-between}.ecosystem-grid{grid-template-columns:1fr}.ecosystem-grid a{min-height:auto}.social-proof-links{display:grid;grid-template-columns:repeat(2,1fr)}}

@media (max-width: 1180px) {
    .hero-container { grid-template-columns: 1.08fr .92fr; }
    .tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hero-container { min-height: 0; grid-template-columns: 1fr; padding: 0; }
    .hero-copy { padding: 3rem 1.5rem 2.4rem; }
    .hero-visual { max-height: 360px; }
    .recent-container { grid-template-columns: 140px 1fr auto; padding-inline: 1.5rem; }
    .recent-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recent-tool:nth-child(3) { display: none; }
    .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    #webapp { display: flex; flex-direction: column; background: var(--home-surface); }
    .hero-section { order: 1; padding-top: 1rem; background: var(--home-surface); border-bottom: 0; }
    .hero-container { display: block; padding: 0 1.25rem; }
    .hero-copy { padding: 1.6rem 0 1rem; }
    .hero-title-desktop, .hero-subtitle, .hero-visual, .hero-trust, .section-tag { display: none; }
    .hero-title-mobile { display: block; margin: 0 0 1.15rem; font-size: clamp(1.8rem, 8vw, 2.35rem); line-height: 1.08; letter-spacing: -.04em; }
    .hero-search { height: 60px; padding: 5px 6px 5px 16px; grid-template-columns: auto minmax(0, 1fr) auto; border-radius: 18px; box-shadow: 0 8px 24px rgba(74,52,160,.1); }
    .hero-search input { font-size: .95rem; text-overflow: ellipsis; }
    .hero-search-btn { width: 44px; padding: 0; font-size: 0; }
    .hero-search-btn::before { content: "\f138"; font-family: "bootstrap-icons"; font-size: 1.15rem; }

    .search-section { order: 2; padding: .6rem 1.25rem .9rem; border-bottom: 1px solid var(--home-line); }
    .library-controls { display: block; }
    .quick-tabs { margin: 0; display: flex; gap: .55rem; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
    .quick-tabs::-webkit-scrollbar { display: none; }
    .quick-tab { min-height: 44px; padding: .62rem .9rem; border-radius: 12px; font-size: .78rem; }
    .quick-tab.latest-tab, .sort-control { display: none; }
    .quick-tab[data-category="Network"] { display: none; }
    .quick-tab[data-category="Security"] { display: none; }

    .tools-section { order: 3; padding: 1.1rem 1.25rem .5rem; }
    .mobile-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
    .mobile-list-header h2 { margin: 0; display: flex; align-items: center; gap: .55rem; color: var(--home-ink); font-size: 1.15rem; }
    .mobile-list-header h2 i { color: var(--home-accent); }
    .mobile-list-header button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--home-accent); font-size: .78rem; font-weight: 750; }
    .tools-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: .7rem; }
    .tool-card-item { min-height: 88px; padding: .82rem; display: grid; grid-template-columns: 58px minmax(0,1fr) 44px; grid-template-rows: auto auto; column-gap: .8rem; row-gap: .18rem; align-items: center; border: 1px solid var(--home-line); border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--home-line) 32%,transparent),0 3px 12px rgba(17,24,39,.055); }
    .tool-card-item:hover { transform: none; border-color:#8f7cff; box-shadow: inset 0 0 0 1px rgba(143,124,255,.22),0 5px 16px rgba(49,39,105,.1); }
    .tool-card-item:active { transform: scale(.992); background: color-mix(in srgb,var(--home-surface) 94%,var(--home-accent)); }
    .tool-icon-box { grid-column: 1; grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 14px; }
    .tool-icon-box img { width: 42px; height: 42px; }
    .tool-title { grid-column: 2; grid-row: 1; font-size: .94rem; }
    .tool-desc { grid-column: 2; grid-row: 2; -webkit-line-clamp: 1; font-size: .76rem; }
    .tool-category { display: none; }
    .tool-launch-btn { grid-column: 3; grid-row: 1 / 3; width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 0; border-radius: 12px; }
    .tool-launch-btn i { font-size: 1rem; }
    .tool-launch-btn i::before { content: "\f285"; }
    .tool-card-item[data-new="true"]::after { top: 6px; right: 48px; }

    .recent-section { order: 4; border-top: 0; border-bottom: 1px solid var(--home-line); }
    .recent-container { min-height: 0; padding: 1rem 1.25rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: .75rem; }
    .recent-label { font-size: 1.05rem; }
    .recent-tools { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
    .recent-tool, .recent-tool:nth-child(n+2) { min-width: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; border: 0; text-align: center; }
    .recent-tool img { width: 56px; height: 56px; padding: 8px; border-radius: 14px; }
    .recent-tool strong { max-width: 90px; font-size: .72rem; white-space: normal; line-height: 1.2; }
    .recent-tool small { display: none; }
    .recent-clear { min-height: 44px; font-size: .72rem; }

    #webapp > .features-section, #webapp > .how-it-works-section, #webapp > .why-choose-section, #webapp > .faq-section, #webapp > .cta-section { order: 5; }
}
@media (max-width: 390px) {
    .tool-card-item { min-height: 82px; }
}

/* 2026 hero redesign: balanced first screen, clear actions, full artwork */
.fab-button,.fab-menu{display:none!important}
.hero-section{position:relative;padding:5.1rem 0 0;background:
    radial-gradient(circle at 76% 42%,rgba(127,89,255,.16),transparent 34%),
    linear-gradient(135deg,var(--home-soft) 0%,var(--home-surface) 100%)}
.hero-container{min-height:670px;grid-template-columns:minmax(560px,.92fr) minmax(560px,1.08fr);gap:clamp(1rem,3vw,4rem);align-items:center;padding:2.1rem 2.4rem 1.5rem}
.hero-copy{padding:2.5rem 0}
.hero-title{max-width:720px;margin-bottom:1.15rem;font-size:clamp(3.35rem,4.35vw,4.75rem);line-height:.99}
.hero-subtitle{max-width:680px;margin-bottom:1.25rem;font-size:1.05rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1.25rem}
.hero-btn{min-height:48px;padding:.75rem 1.15rem;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:12px;font-size:.88rem;font-weight:800;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hero-btn:hover{transform:translateY(-2px)}
.hero-btn-primary{color:#fff;background:linear-gradient(135deg,#6d4aff,#d346ad);box-shadow:0 12px 28px rgba(109,74,255,.25)}
.hero-btn-primary:hover{color:#fff;box-shadow:0 16px 34px rgba(109,74,255,.34)}
.hero-btn-secondary{color:var(--home-ink);background:color-mix(in srgb,var(--home-surface) 88%,transparent);border:1px solid var(--home-line)}
.hero-btn-secondary:hover{color:var(--home-accent);border-color:#8d76ff}
.hero-search{height:61px;border-radius:16px;box-shadow:0 14px 36px rgba(61,44,128,.1)}
.hero-search-btn{height:47px;border-radius:11px}
.hero-trust{margin-top:1rem}
.hero-visual{height:620px;display:flex;align-items:center;justify-content:center;background:transparent;overflow:visible}
.hero-visual img{width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 30px 42px rgba(55,38,130,.18))}

.authority-section{padding:5rem 1.5rem;background:linear-gradient(180deg,var(--bg-secondary),var(--bg-primary))}
.authority-shell{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(620px,1.28fr);gap:2.25rem 3rem;align-items:start}
.authority-intro{position:sticky;top:7rem;padding:2rem;border:1px solid var(--border-color);border-radius:1.35rem;background:var(--bg-card);box-shadow:var(--shadow-card)}
.authority-intro h2{font-size:clamp(2rem,3.1vw,3.6rem)}
.authority-actions{display:grid;margin-bottom:0}
.authority-actions a{justify-content:space-between}
.ecosystem-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.ecosystem-grid a{min-height:132px;position:relative;padding:1.25rem 1.25rem 1.1rem 1.45rem;box-shadow:none}
.ecosystem-grid a::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:99px;background:linear-gradient(#7455ff,#dc47ac)}
.social-proof-links{grid-column:2;margin-top:-.8rem;padding:.9rem 1rem;border:1px solid var(--border-color);border-radius:1rem;background:var(--bg-card)}

@media(max-width:1180px){
  .hero-container{grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);min-height:620px}
  .hero-title{font-size:clamp(3rem,5vw,4.15rem)}
  .hero-visual{height:520px}
  .authority-shell{grid-template-columns:1fr}.authority-intro{position:static}.social-proof-links{grid-column:1}
}
@media(max-width:900px){
  .hero-container{grid-template-columns:1fr;gap:0;padding:2.2rem 1.5rem 1rem}
  .hero-copy{padding:2rem 0 0}.hero-visual{height:400px;max-height:none}
}
@media(max-width:680px){
  .hero-section{padding-top:.75rem}.hero-container{padding:0 1.15rem 1.2rem}
  .hero-copy{padding:1.35rem 0 0}.hero-title-mobile{margin-bottom:.9rem;font-size:clamp(2.05rem,9.4vw,2.75rem)}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;margin-bottom:1rem}.hero-btn{min-height:46px;padding:.65rem .55rem;font-size:.75rem}
  .hero-search{height:58px;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;overflow:hidden}.hero-search-btn{flex:0 0 44px}.search-clear{width:36px;height:44px;padding:0;display:grid;place-items:center}.search-clear[hidden]{display:none}
  .hero-visual{height:clamp(300px,72vw,390px);max-width:520px;margin:0 auto}.hero-visual img{object-position:center top}
  .authority-section{order:5;padding:3rem 1rem}.authority-shell{display:block}.authority-intro{padding:1.35rem;margin-bottom:1rem}.authority-intro h2{font-size:2rem}
  .ecosystem-grid{grid-template-columns:1fr}.ecosystem-grid a{min-height:auto}.social-proof-links{display:flex;margin-top:1rem}
}
@media(max-width:430px){
  .nav-container{padding:.75rem 1rem;gap:.75rem}.nav-actions{gap:.4rem}.notification-button,.theme-switcher-btn,.mobile-menu-btn{width:42px;height:42px}
  .hero-container{padding-inline:1rem}.hero-title-mobile{font-size:clamp(1.95rem,10.5vw,2.35rem)}
  .hero-actions{grid-template-columns:1fr}.hero-btn{font-size:.82rem}
  .hero-search{padding-left:14px}.hero-search-btn{width:44px}
}
/* Progressive homepage journey: tools → trust → ecosystem */
.specialty-section,.trust-section,.product-section{padding:clamp(3rem,7vw,6rem) 1.5rem;border-top:1px solid var(--border-subtle)}
.specialty-shell,.trust-shell,.product-shell{max-width:1200px;margin:0 auto}
.specialty-heading,.product-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.5rem}
.specialty-heading h2,.trust-copy h2,.product-heading h2{margin:.3rem 0;color:var(--text-primary);font-size:clamp(1.65rem,3.4vw,2.7rem);letter-spacing:-.035em}
.specialty-all,.product-heading>a,.trust-actions a{display:inline-flex;align-items:center;gap:.55rem;color:var(--primary);font-weight:700;text-decoration:none;white-space:nowrap}
.specialty-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:.7rem}
.specialty-strip a{min-height:88px;padding:1rem .75rem;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;color:var(--text-secondary);text-decoration:none;font-weight:700;transition:.2s ease}
.specialty-strip a i{font-size:1.3rem;color:var(--primary)}
.specialty-strip a:hover{transform:translateY(-3px);color:var(--text-primary);border-color:var(--border-color);box-shadow:var(--shadow-glow)}
.trust-section{background:linear-gradient(110deg,transparent,var(--primary-glow),transparent)}
.trust-shell{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.7rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--border-color);border-radius:var(--radius-2xl);background:var(--bg-card);box-shadow:var(--shadow-card)}
.trust-shell>img{width:112px;height:112px;object-fit:cover;border-radius:1.2rem;border:1px solid var(--border-color)}
.trust-copy p{margin:0;max-width:720px;color:var(--text-secondary)}
.trust-copy p strong{color:var(--text-primary)}
.trust-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.product-heading p{margin:.35rem 0 0;color:var(--text-secondary)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.product-grid a{padding:1.4rem;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);background:var(--bg-card);text-decoration:none;display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;transition:.2s ease}
.product-grid a>i{grid-row:1/3;font-size:1.55rem;color:var(--primary)}
.product-grid strong{color:var(--text-primary)}
.product-grid span{color:var(--text-secondary);font-size:.9rem;margin-top:.2rem}
.product-grid a:hover{transform:translateY(-3px);border-color:var(--border-color);box-shadow:var(--shadow-glow)}
@media(max-width:900px){.specialty-strip{grid-template-columns:repeat(4,1fr)}.trust-shell{grid-template-columns:auto 1fr}.trust-actions{grid-column:1/-1;flex-direction:row}.product-grid{grid-template-columns:1fr}}
@media(max-width:600px){
    .specialty-section,.trust-section,.product-section{padding:2.6rem 1rem}
    .specialty-heading,.product-heading{align-items:flex-start;flex-direction:column;gap:.65rem;margin-bottom:1.15rem}
    .specialty-heading h2{font-size:1.7rem}
    .specialty-all{min-height:44px;margin-top:-.2rem}
    .specialty-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
    .specialty-strip a{min-height:64px;padding:.75rem .85rem;flex-direction:row;justify-content:flex-start;gap:.7rem;border-radius:14px;text-align:left}
    .specialty-strip a i{width:24px;flex:0 0 24px;font-size:1.15rem;text-align:center}
    .specialty-strip a:last-child{grid-column:1/-1;justify-content:center}
    .specialty-strip a:hover{transform:none}
    .specialty-strip a:active{transform:scale(.985);background:color-mix(in srgb,var(--bg-card) 92%,var(--primary))}
    .trust-shell{grid-template-columns:1fr}
    .trust-shell>img{width:82px;height:82px}
    .trust-actions{flex-direction:column}
    .product-heading>a{white-space:normal}
}
.notification-button{position:relative;width:48px;height:48px;border:1px solid var(--border-color,#e2e8f0);border-radius:14px;background:var(--surface,#fff);color:var(--text-primary,#0f172a);display:grid;place-items:center;font-size:1.05rem;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.notification-button:hover,.notification-button:focus-visible{transform:translateY(-2px);border-color:#8b5cf6;box-shadow:0 10px 24px rgba(86,65,200,.14);outline:none}.notification-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;border:2px solid var(--surface,#fff);font:700 11px/16px var(--font-body,Arial,sans-serif)}
.notification-panel{position:fixed;z-index:1201;top:92px;right:max(24px,calc((100vw - 1640px)/2));width:min(430px,calc(100vw - 32px));max-height:min(650px,calc(100vh - 116px));overflow:hidden;background:var(--surface,#fff);color:var(--text-primary,#0f172a);border:1px solid var(--border-color,#e2e8f0);border-radius:24px;box-shadow:0 24px 70px rgba(15,23,42,.22)}.notification-panel-header{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid var(--border-color,#e2e8f0)}.notification-panel-header h2{font-size:1.45rem;margin:3px 0 0}.notification-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.16em;color:#8b5cf6}.notification-panel-header button{width:40px;height:40px;border:0;border-radius:12px;background:rgba(139,92,246,.1);color:inherit;cursor:pointer}.notification-list{overflow:auto;max-height:calc(min(650px,100vh - 116px) - 86px);padding:12px}.notification-item{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:14px;border-radius:16px}.notification-item+.notification-item{border-top:1px solid var(--border-color,#e2e8f0)}.notification-item-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#6d5dfc,#d946a8);color:#fff;display:grid;place-items:center}.notification-item h3{font-size:1rem;margin:0 0 4px}.notification-item p{font-size:.9rem;line-height:1.45;margin:0 0 8px;color:var(--text-secondary,#64748b)}.notification-item time{font-size:.75rem;color:var(--text-secondary,#64748b)}.notification-item a{display:block;margin-top:8px;color:#7957e8;font-size:.84rem;font-weight:800;text-decoration:none}.notification-empty{padding:36px 18px;text-align:center;color:var(--text-secondary,#64748b)}.notification-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.22);backdrop-filter:blur(2px)}.notifications-open{overflow:hidden}
@media(max-width:680px){.notification-button{width:44px;height:44px;border-radius:13px}.notification-panel{top:auto;left:10px;right:10px;bottom:10px;width:auto;max-height:min(72vh,620px);border-radius:24px}.notification-list{max-height:calc(min(72vh,620px) - 86px)}}

/* Flagship-first homepage hierarchy */
.hero-profile-links{display:flex;flex-wrap:wrap;gap:.55rem;margin:-.35rem 0 1.1rem}
.hero-profile-links a{display:inline-flex;align-items:center;gap:.45rem;padding:.48rem .72rem;border:1px solid var(--home-line,var(--border-subtle));border-radius:999px;color:var(--home-text,var(--text-primary));background:color-mix(in srgb,var(--home-surface,var(--bg-card)) 92%,transparent);font-size:.82rem;font-weight:750;text-decoration:none;transition:transform .2s ease,border-color .2s ease,color .2s ease}
.hero-profile-links a:hover,.hero-profile-links a:focus-visible{transform:translateY(-2px);border-color:#8f7cff;color:#7658f4;outline:none}
.flagship-section{padding:clamp(3.5rem,7vw,6.5rem) 1.5rem;background:var(--home-bg,var(--bg-primary));border-bottom:1px solid var(--home-line,var(--border-subtle))}
.flagship-shell{max-width:1400px;margin:0 auto}
.flagship-heading{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.65fr);align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.7rem}
.flagship-heading h2{margin:.25rem 0 0;max-width:760px;color:var(--home-text,var(--text-primary));font-size:clamp(2.2rem,4.1vw,4.4rem);line-height:.98;letter-spacing:-.055em}
.flagship-heading>p{max-width:590px;margin:0;color:var(--home-muted,var(--text-secondary));font-size:1rem;line-height:1.7}
.flagship-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:flagship}
.flagship-card{position:relative;min-height:280px;padding:1.45rem;overflow:hidden;border:1px solid var(--home-line,var(--border-subtle));border-radius:22px;background:var(--home-surface,var(--bg-card));color:var(--home-text,var(--text-primary));display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;box-shadow:0 10px 35px rgba(31,25,70,.07);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.flagship-card:before{content:"";position:absolute;inset:auto -25% -62% 20%;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(124,88,255,.18),transparent 68%);pointer-events:none}
.flagship-card:hover,.flagship-card:focus-visible{transform:translateY(-6px);border-color:#8f7cff;box-shadow:0 22px 45px rgba(62,45,137,.16);outline:none}
.flagship-card-primary{background:linear-gradient(145deg,#14102d,#25165e);color:#fff;border-color:#745cff;box-shadow:0 20px 50px rgba(87,57,202,.24)}
.flagship-card>.bi{display:grid;place-items:center;width:54px;height:54px;margin-bottom:1.35rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:16px;background:color-mix(in srgb,currentColor 7%,transparent);color:#7658f4;font-size:1.45rem}
.flagship-card-primary>.bi{color:#69e5ff;background:rgba(105,229,255,.1)}
.flagship-number{position:absolute;top:1.3rem;right:1.35rem;color:color-mix(in srgb,currentColor 34%,transparent);font-family:var(--font-mono);font-size:.78rem;font-weight:800;letter-spacing:.12em}
.flagship-card strong{font-size:1.18rem;letter-spacing:-.02em}
.flagship-card>span:not(.flagship-number){margin:.5rem 0 1.25rem;color:color-mix(in srgb,currentColor 67%,transparent);font-size:.92rem;line-height:1.58}
.flagship-card b{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;color:#7658f4;font-size:.82rem}
.flagship-card-primary b{color:#69e5ff}
.flagship-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1.15rem 1.35rem;border:1px solid var(--home-line,var(--border-subtle));border-radius:18px;background:color-mix(in srgb,var(--home-surface,var(--bg-card)) 92%,#7658f4 8%)}
.flagship-footer p{margin:0;color:var(--home-muted,var(--text-secondary))}.flagship-footer p strong{color:var(--home-text,var(--text-primary))}
.flagship-footer>a{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;padding:.7rem 1rem;border-radius:12px;background:#7658f4;color:#fff;font-weight:800;text-decoration:none}
@media(max-width:980px){.flagship-heading{grid-template-columns:1fr}.flagship-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  .hero-profile-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:.15rem 0 .9rem}
  .hero-profile-links a{justify-content:center;padding:.55rem .35rem;font-size:.72rem}
  .flagship-section{padding:3rem 1rem}.flagship-heading{gap:.8rem;margin-bottom:1.15rem}.flagship-heading h2{font-size:2.25rem}.flagship-heading>p{font-size:.92rem}
  .flagship-grid{grid-template-columns:1fr;gap:.75rem}.flagship-card{min-height:0;padding:1.15rem;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:.9rem;align-items:start;border-radius:17px}
  .flagship-card>.bi{grid-row:1/4;width:46px;height:46px;margin:0;border-radius:13px}.flagship-card strong{padding-right:2rem;font-size:1.04rem}.flagship-card>span:not(.flagship-number){margin:.3rem 0 .75rem;font-size:.84rem}.flagship-card b{grid-column:2;font-size:.78rem}.flagship-number{top:1.05rem;right:1.05rem}
  .flagship-card:hover{transform:none}.flagship-footer{align-items:flex-start;flex-direction:column;padding:1rem}.flagship-footer>a{width:100%;justify-content:center}
}