:root {
    /* INDIGO + EMERALD palette - professional + Islamic vibe */
    --primary: #4f46e5;
    --primary-light: #6366f1;
    --primary-soft: #818cf8;
    --primary-glow: #a5b4fc;
    --primary-bg: #eef2ff;
    --accent: #059669;
    --accent-light: #10b981;
    --accent-soft: #34d399;
    --accent-bg: #d1fae5;
    --warm: #f59e0b;
    --warm-bg: #fef3c7;
    --rose: #f43f5e;
    --rose-bg: #ffe4e6;
    /* Backgrounds */
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --bg-card: #fafbfc;
    /* Text */
    --text: #0f172a;
    --text-2: #1e293b;
    --text-3: #475569;
    --text-4: #64748b;
    --text-5: #94a3b8;
    --border: rgba(15, 23, 42, 0.08);
    --border-2: rgba(15, 23, 42, 0.12);
    /* Medium gradients */
    --grad-primary: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --grad-accent: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --grad-warm: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --grad-cool: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
    --grad-rose: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
    --grad-purple: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    /* Shadows */
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 16px -4px rgba(15, 23, 42, 0.08), 0 16px 32px -8px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 8px 20px -4px rgba(99, 102, 241, 0.3);
    /* Layout */
    --r: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --container: 1200px;
    --pad: 24px;
    --font: 'Manrope', system-ui, -apple-system, sans-serif;
}

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

*::selection {
    background: var(--primary);
    color: white;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: 'ss01', 'cv11';
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    position: relative;
}


/* ════════════════════════════════════════
   TOP BAR — Refined dark with premium feel
   ════════════════════════════════════════ */

.topbar {
    background: #0a0e1a;
    color: rgba(255, 255, 255, 0.75);
    position: relative;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

.topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 600px 40px at 20% 100%, rgba(99, 102, 241, 0.15) 0%, transparent 60%), radial-gradient(ellipse 400px 30px at 80% 100%, rgba(16, 185, 129, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.5) 30%, rgba(167, 139, 250, 0.6) 50%, rgba(16, 185, 129, 0.4) 70%, transparent 100%);
}

.topbar-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 12.5px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}


/* Date/Time Display */

.topbar-left {
    display: flex;
    align-items: center;
}

.topbar-datetime {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.topbar-link {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
    letter-spacing: -0.005em;
}

.topbar-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.08);
}

.dt-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.8);
}

.dt-item svg {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    color: #a5b4fc;
}

.dt-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.12);
}

.dt-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2.5px 7px;
    border-radius: 4px;
    margin-right: 2px;
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.dt-label.hijri {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.2);
}

.dt-value {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}

.dt-pulse {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    position: relative;
    margin-right: 2px;
}

.dt-pulse::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: #22c55e;
    border-radius: 50%;
    opacity: 0.4;
    animation: ping 2s ease-out infinite;
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}


/* Social Icons */

.topbar-social {
    display: flex;
    align-items: center;
    gap: 3px;
}

.social-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-right: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.social-link {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-link svg {
    width: 13px;
    height: 13px;
}

.social-link:hover {
    color: white;
    transform: translateY(-1px);
    border-color: transparent;
}

.social-link.fb:hover {
    background: #1877f2;
    box-shadow: 0 4px 12px -2px rgba(24, 119, 242, 0.4);
}

.social-link.ig:hover {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 4px 12px -2px rgba(220, 39, 67, 0.4);
}

.social-link.li:hover {
    background: #0a66c2;
    box-shadow: 0 4px 12px -2px rgba(10, 102, 194, 0.4);
}

.social-link.wa:hover {
    background: #25d366;
    box-shadow: 0 4px 12px -2px rgba(37, 211, 102, 0.4);
}

.social-link.tw:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px -2px rgba(255, 255, 255, 0.2);
}


/* ════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════ */

.nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    height: 70px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 36px;
}

.logo-mark {
    width: 38px;
    height: 38px;
    background: var(--grad-primary);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.02em;
    box-shadow: var(--shadow-glow);
}

.logo-text {
    font-size: 21px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.025em;
}

.logo-text .em {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav-item {
    position: relative;
}

.nav-link {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-3);
    border-radius: 10px;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

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

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

.nav-link .caret {
    font-size: 9px;
    opacity: 0.6;
    transition: transform 0.2s;
}

.nav-item.open .nav-link .caret {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    min-width: 320px;
    padding: 8px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s;
}

.nav-item.open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    transition: background 0.15s;
}

.dropdown a:hover {
    background: var(--primary-bg);
}

.dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 17px;
    flex-shrink: 0;
    color: white;
    background: var(--grad-accent);
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
}

.dropdown-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.dropdown-text small {
    font-size: 12px;
    color: var(--text-4);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.search-btn {
    width: 42px;
    height: 42px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-3);
}

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

.search-btn svg {
    width: 18px;
    height: 18px;
}

.menu-toggle {
    display: none;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

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

.menu-toggle-icon {
    width: 22px;
    height: 22px;
    display: block;
}

.menu-toggle-close { display: none; }
.menu-toggle.is-open .menu-toggle-open  { display: none; }
.menu-toggle.is-open .menu-toggle-close { display: block; }

/* Mobile drawer backdrop — dimmed area behind the open menu */
.nav-backdrop {
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
.nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.nav-backdrop[hidden] { display: none; }
body.nav-open { overflow: hidden; }

.search-overlay {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 28px;
    z-index: 99;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.search-overlay.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.search-overlay-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.search-overlay svg.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-4);
}

.search-overlay input {
    width: 100%;
    padding: 16px 56px 16px 50px;
    border: 2px solid var(--border);
    border-radius: 14px;
    font-family: var(--font);
    font-size: 16px;
    outline: none;
    font-weight: 500;
}

.search-overlay input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.search-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.search-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.search-tags-label {
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.search-tag {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--bg-soft);
    color: var(--text-3);
    border: 1px solid var(--border);
    font-weight: 600;
}

.search-tag:hover {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
}

.search-backdrop {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 98;
}

.search-backdrop.open {
    opacity: 1;
    visibility: visible;
}


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

.hero {
    padding: 100px 0 110px;
    position: relative;
    overflow: hidden;
}

/* Hero responsive — phone */
@media (max-width: 720px) {
    .hero { padding: 56px 0 64px; }
    .hero-inner { padding: 0 4px; }
}
@media (max-width: 480px) {
    .hero { padding: 40px 0 56px; }
}

.mesh-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.mesh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.mesh-1 {
    top: -200px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: var(--primary-soft);
    animation: meshFloat 20s ease-in-out infinite;
}

.mesh-2 {
    top: 100px;
    right: -150px;
    width: 600px;
    height: 600px;
    background: var(--accent-soft);
    animation: meshFloat 25s ease-in-out infinite reverse;
}

.mesh-3 {
    bottom: -200px;
    left: 30%;
    width: 500px;
    height: 500px;
    background: var(--primary-glow);
    opacity: 0.25;
    animation: meshFloat 22s ease-in-out infinite;
}

@keyframes meshFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(60px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-40px, 60px) scale(0.95);
    }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 60% at center, black 0%, transparent 80%);
    z-index: 1;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    padding: 8px 16px 8px 8px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 32px;
    box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.15);
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.hero-badge-pill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-200%);
    will-change: transform;
    animation: badgeShine 3.2s ease-in-out 1.4s infinite;
}

@keyframes badgeShine {
    0% { transform: translateX(-200%); }
    40%, 100% { transform: translateX(350%); }
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-badge-pill {
    position: relative;
    overflow: hidden;
    background: var(--grad-primary);
    color: white;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(34px, 7vw, 72px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-bottom: 24px;
    color: var(--text);
    text-wrap: balance;
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.hero h1 .gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #10b981 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 8s ease infinite;
}

@keyframes gradientFlow {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.hero-sub {
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--text-3);
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto 36px;
    font-weight: 500;
    text-wrap: pretty;
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

.hero-sub strong {
    color: var(--text-2);
    font-weight: 700;
}

.hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

/* SEO-rich tool chips below CTAs — visual + keyword anchor text */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 760px;
    margin: 0 auto 36px;
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.hero-chips-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 4px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    transition: transform 0.15s, border-color 0.18s, box-shadow 0.18s, color 0.15s, background 0.18s;
    white-space: nowrap;
}

.hero-chip:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    color: var(--primary);
    background: white;
    box-shadow: 0 6px 14px -6px rgba(99, 102, 241, 0.3);
}

.btn-primary {
    background: var(--grad-primary);
    color: white;
    padding: 15px 28px;
    border-radius: 12px;
    border: none;
    font-family: var(--font);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
    transition: all 0.25s;
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.4);
}

.btn-primary svg {
    transition: transform 0.25s;
}

.btn-primary:hover svg {
    transform: translateX(3px);
}

.btn-secondary {
    background: white;
    color: var(--text);
    padding: 15px 28px;
    border-radius: 12px;
    border: 1px solid var(--border-2);
    font-family: var(--font);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
    transition: all 0.25s;
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hero-trust {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-3);
    font-weight: 600;
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

/* Hero responsive — phone tweaks for trust + cta + chips + badge */
@media (max-width: 720px) {
    .hero-badge { font-size: 12px; padding: 6px 14px 6px 6px; margin-bottom: 22px; }
    .hero-badge-pill { font-size: 10px; padding: 3px 8px; }
    .hero h1 { margin-bottom: 18px; }
    .hero-sub { margin-bottom: 24px; }
    .hero-cta { gap: 10px; margin-bottom: 22px; }
    .hero-cta .btn-primary,
    .hero-cta .btn-secondary { padding: 13px 22px; font-size: 14.5px; }
    .hero-chips { gap: 6px; margin-bottom: 26px; }
    .hero-chip { font-size: 12px; padding: 6px 11px; }
    .hero-chips-label { width: 100%; text-align: center; margin: 0 0 4px; }
    .hero-trust { gap: 14px 18px; font-size: 12.5px; }
    .trust-check { width: 18px; height: 18px; }
    .trust-check svg { width: 9px; height: 9px; }
}

@media (max-width: 480px) {
    .hero-cta { flex-direction: column; align-items: stretch; padding: 0 24px; }
    .hero-cta .btn-primary,
    .hero-cta .btn-secondary { justify-content: center; width: 100%; }
}

.trust-check {
    animation: trustPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.trust-item:nth-child(1) .trust-check { animation-delay: 1.05s; }
.trust-item:nth-child(2) .trust-check { animation-delay: 1.15s; }
.trust-item:nth-child(3) .trust-check { animation-delay: 1.25s; }
.trust-item:nth-child(4) .trust-check { animation-delay: 1.35s; }

@keyframes trustPop {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-badge,
    .hero h1,
    .hero-sub,
    .hero-cta,
    .hero-trust {
        opacity: 1;
        animation: none;
    }
    .hero-badge-pill::after,
    .trust-check {
        animation: none;
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trust-check {
    width: 22px;
    height: 22px;
    background: var(--grad-accent);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 8px -2px rgba(16, 185, 129, 0.3);
}

.trust-check svg {
    width: 11px;
    height: 11px;
    color: white;
}


/* ════════════════════════════════════════
   TRUSTED BY (LOGOS) — Marquee style
   ════════════════════════════════════════ */

.trusted-section {
    padding: 56px 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.trusted-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-4);
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trusted-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 48px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.trusted-logos:hover {
    opacity: 0.9;
}

.trusted-logo {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
    filter: grayscale(1);
    transition: all 0.2s;
}

.trusted-logo:hover {
    filter: grayscale(0);
    color: var(--primary);
}

.trusted-logo .icon {
    font-size: 24px;
}


/* ════════════════════════════════════════
   SECTIONS COMMON
   ════════════════════════════════════════ */

.section {
    padding: 100px 0;
}

.section-head {
    text-align: center;
    margin-bottom: 56px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--primary-bg);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 18px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.section-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
}

/* Per-category eyebrow palettes — keeps the visual identity per section
   (Islamic = green/teal, Generators = indigo/purple, Health = teal). */
.section-head-islamic .section-eyebrow {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}
.section-head-islamic .section-eyebrow::before { background: #10b981; }

.section-head-health .section-eyebrow {
    background: rgba(20, 184, 166, 0.08);
    color: #0f766e;
    border-color: rgba(20, 184, 166, 0.25);
}
.section-head-health .section-eyebrow::before { background: #14b8a6; }

.section-h2 {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 14px;
    text-wrap: balance;
}

.section-h2 .gradient {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-h2 .gradient-accent {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-h2 .gradient-teal {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #5eead4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc {
    font-size: clamp(14.5px, 1.5vw, 17px);
    color: var(--text-3);
    line-height: 1.65;
    font-weight: 500;
    max-width: 580px;
    margin: 0 auto;
    text-wrap: pretty;
}

/* Mobile: tighten spacing + sizing on section heads so they don't dominate */
@media (max-width: 720px) {
    .section-head { margin-bottom: 36px; padding: 0 4px; }
    .section-eyebrow { font-size: 11px; padding: 5px 12px; margin-bottom: 14px; }
}
@media (max-width: 480px) {
    .section-head { margin-bottom: 28px; }
}


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

.tools-section {
    background: var(--bg);
}

.tools-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.tools-block-head-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tools-block-emoji {
    width: 56px;
    height: 56px;
    background: var(--grad-accent);
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 26px;
    flex-shrink: 0;
    color: white;
    box-shadow: 0 8px 16px -4px rgba(16, 185, 129, 0.3);
}

.tools-block-head h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}

.tools-block-sub {
    font-size: 14px;
    color: var(--text-4);
    font-weight: 500;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tool {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tool::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tool:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.tool:hover::after {
    opacity: 1;
}

.tool-emoji {
    width: 52px;
    height: 52px;
    background: var(--grad-accent);
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 14px;
    color: white;
    box-shadow: 0 6px 12px -3px rgba(16, 185, 129, 0.25);
    transition: transform 0.25s;
}

.tool:hover .tool-emoji {
    transform: rotate(-6deg) scale(1.05);
}

.tool-card-2 .tool-emoji {
    background: var(--grad-warm);
    box-shadow: 0 6px 12px -3px rgba(245, 158, 11, 0.25);
}

.tool-card-3 .tool-emoji {
    background: var(--grad-primary);
    box-shadow: 0 6px 12px -3px rgba(99, 102, 241, 0.25);
}

.tool-card-4 .tool-emoji {
    background: var(--grad-rose);
    box-shadow: 0 6px 12px -3px rgba(244, 63, 94, 0.25);
}

.tool-card-5 .tool-emoji {
    background: var(--grad-cool);
    box-shadow: 0 6px 12px -3px rgba(99, 102, 241, 0.25);
}

.tool-card-6 .tool-emoji {
    background: var(--grad-purple);
    box-shadow: 0 6px 12px -3px rgba(139, 92, 246, 0.25);
}

.tool-card-7 .tool-emoji {
    background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
    box-shadow: 0 6px 12px -3px rgba(6, 182, 212, 0.25);
}

.tool-card-8 .tool-emoji {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 6px 12px -3px rgba(239, 68, 68, 0.25);
}


/* GENERATOR TOOLS - Pink/Purple theme */

.text-emoji {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
    box-shadow: 0 8px 16px -4px rgba(236, 72, 153, 0.3) !important;
}

.text-tool-1 .tool-emoji {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    box-shadow: 0 6px 12px -3px rgba(139, 92, 246, 0.25);
}

.text-tool-2 .tool-emoji {
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    box-shadow: 0 6px 12px -3px rgba(6, 182, 212, 0.25);
}

.text-tool-3 .tool-emoji {
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    box-shadow: 0 6px 12px -3px rgba(245, 158, 11, 0.25);
}

.text-tool-4 .tool-emoji {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    box-shadow: 0 6px 12px -3px rgba(236, 72, 153, 0.25);
}

.text-tool-5 .tool-emoji {
    background: linear-gradient(135deg, #f43f5e 0%, #f59e0b 100%);
    box-shadow: 0 6px 12px -3px rgba(244, 63, 94, 0.25);
}

.text-tool-6 .tool-emoji {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 6px 12px -3px rgba(99, 102, 241, 0.25);
}

.tool-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.015em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.tool-desc {
    font-size: 13.5px;
    color: var(--text-4);
    line-height: 1.5;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.tool-pill {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    flex-shrink: 0;
}

.pill-hot {
    background: var(--grad-rose);
}

.pill-new {
    background: var(--grad-accent);
}

.pill-pop {
    background: var(--grad-warm);
}

.pill-soon {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.tool-disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.ad-spot {
    background: white;
    border: 2px dashed var(--border-2);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    margin: 48px 0;
    color: var(--text-4);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* Show more button */

.tool.hidden {
    display: none;
}

.tool.hidden.shown {
    display: block;
}

.show-more-wrap {
    text-align: center;
    margin-top: 32px;
}

.show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--primary);
    padding: 13px 24px;
    border-radius: 100px;
    border: 1.5px solid var(--primary);
    font-family: var(--font);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.25s;
}

.show-more-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(99, 102, 241, 0.3);
}

.show-more-btn .count {
    background: var(--primary-bg);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    transition: all 0.25s;
}

.show-more-btn:hover .count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.show-more-btn .arrow {
    transition: transform 0.3s;
}

.show-more-btn.expanded .arrow {
    transform: rotate(180deg);
}


/* ════════════════════════════════════════
   COMPARISON TABLE
   ════════════════════════════════════════ */

.compare-section {
    background: var(--bg-soft);
    position: relative;
    overflow: hidden;
}

.compare-section::before {
    content: '';
    position: absolute;
    top: 100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
    filter: blur(40px);
}

.compare-table {
    background: white;
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 1;
}

.compare-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-header {
    background: var(--bg-soft);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.compare-cell {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text);
    border-right: 1px solid var(--border);
}

.compare-cell:last-child {
    border-right: none;
}

.compare-cell-feature {
    font-weight: 600;
    font-size: 14.5px;
}

.compare-cell-product {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.compare-product-name {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.compare-product-name.us {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.compare-product-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--accent-bg);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.compare-row-us {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(16, 185, 129, 0.04) 100%);
}

.compare-cell-value {
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: var(--text-3);
}

.compare-yes {
    width: 24px;
    height: 24px;
    background: var(--grad-accent);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.compare-yes svg {
    width: 12px;
    height: 12px;
    color: white;
}

.compare-no {
    width: 24px;
    height: 24px;
    background: var(--rose-bg);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto;
    color: var(--rose);
    font-size: 14px;
    font-weight: 700;
}


/* ════════════════════════════════════════
   FEATURES
   ════════════════════════════════════════ */

.feats-section {
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.feats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.feat {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.feat::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    opacity: 0.08;
    transition: opacity 0.3s;
}

.feat-1::before {
    background: var(--grad-primary);
}

.feat-2::before {
    background: var(--grad-accent);
}

.feat-3::before {
    background: var(--grad-warm);
}

.feat-4::before {
    background: var(--grad-rose);
}

.feat:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.feat:hover::before {
    opacity: 0.18;
}

.feat-emoji {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 26px;
    margin-bottom: 20px;
    color: white;
    position: relative;
    z-index: 1;
    transition: transform 0.3s;
}

.feat-1 .feat-emoji {
    background: var(--grad-primary);
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.3);
}

.feat-2 .feat-emoji {
    background: var(--grad-accent);
    box-shadow: 0 6px 14px -4px rgba(16, 185, 129, 0.3);
}

.feat-3 .feat-emoji {
    background: var(--grad-warm);
    box-shadow: 0 6px 14px -4px rgba(245, 158, 11, 0.3);
}

.feat-4 .feat-emoji {
    background: var(--grad-rose);
    box-shadow: 0 6px 14px -4px rgba(244, 63, 94, 0.3);
}

.feat:hover .feat-emoji {
    transform: rotate(-6deg) scale(1.08);
}

.feat h3 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.025em;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.feat p {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.6;
    font-weight: 500;
    position: relative;
    z-index: 1;
}


/* ════════════════════════════════════════
   STEPS
   ════════════════════════════════════════ */

.steps-section {
    background: var(--bg-soft);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.step {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}

.step:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.step-num {
    width: 64px;
    height: 64px;
    background: var(--grad-primary);
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin: 0 auto 24px;
    box-shadow: 0 8px 16px -4px rgba(99, 102, 241, 0.3);
}

.step-2 .step-num {
    background: var(--grad-accent);
    box-shadow: 0 8px 16px -4px rgba(16, 185, 129, 0.3);
}

.step-3 .step-num {
    background: var(--grad-warm);
    box-shadow: 0 8px 16px -4px rgba(245, 158, 11, 0.3);
}

.step h3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    color: var(--text);
}

.step p {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.6;
    font-weight: 500;
    max-width: 240px;
    margin: 0 auto;
}


/* ════════════════════════════════════════
   BLOG — Simple 3-card grid
   ════════════════════════════════════════ */

.blog-section {
    background: var(--bg);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s ease, border-color 0.32s;
    display: flex;
    flex-direction: column;
    animation: fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
    position: relative;
    isolation: isolate;
}

/* Soft per-variant glow halo on hover */
.blog-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: var(--card-halo, linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(217, 70, 239, 0.3)));
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.35s;
}

.blog-card:hover::before { opacity: 0.55; }

.blog-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 24px 50px -20px var(--card-shadow, rgba(99, 102, 241, 0.45));
}

.blog-thumb {
    position: relative;
    overflow: hidden;
    height: 220px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* Per-thumb-variant gradients + matching halo/shadow tints */
.blog-thumb-1 {
    background: var(--grad-primary);
    --card-halo: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(129, 140, 248, 0.35));
    --card-shadow: rgba(99, 102, 241, 0.45);
}

.blog-thumb-2 {
    background: var(--grad-accent);
    --card-halo: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(52, 211, 153, 0.3));
    --card-shadow: rgba(16, 185, 129, 0.4);
}

.blog-thumb-3 {
    background: var(--grad-warm);
    --card-halo: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(251, 191, 36, 0.3));
    --card-shadow: rgba(245, 158, 11, 0.45);
}

/* Pull halo color into the parent card */
.blog-card:has(.blog-thumb-2) { --card-halo: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(52, 211, 153, 0.3)); --card-shadow: rgba(16, 185, 129, 0.4); }
.blog-card:has(.blog-thumb-3) { --card-halo: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(251, 191, 36, 0.3)); --card-shadow: rgba(245, 158, 11, 0.45); }

.blog-thumb-emoji {
    font-size: 92px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

.blog-card:hover .blog-thumb-emoji {
    transform: scale(1.15) rotate(-6deg) translateY(-4px);
}

/* Decorative corner light + dot grid */
.blog-thumb-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
        radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.4px);
    background-size: auto, 18px 18px;
    background-repeat: no-repeat, repeat;
    transition: opacity 0.4s;
}

/* Bottom fade so the chip floats over a soft darkening — improves contrast */
.blog-thumb::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.15));
    pointer-events: none;
    z-index: 1;
}

.blog-content {
    padding: 22px 22px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-4);
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-cat {
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
}

/* Colored dot before category name (changes with thumb variant) */
.blog-cat::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.blog-card:has(.blog-thumb-2) .blog-cat { color: var(--accent); }
.blog-card:has(.blog-thumb-3) .blog-cat { color: var(--warm); }

.blog-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 10px;
    transition: color 0.25s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card:hover .blog-title {
    color: var(--primary);
}

.blog-excerpt {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.6;
    margin-bottom: 18px;
    flex: 1;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary);
    transition: gap 0.25s, transform 0.25s;
    margin-top: auto;
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 100px;
    align-self: flex-end;
    letter-spacing: 0.01em;
}

.blog-card:hover .blog-readmore {
    gap: 12px;
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 8px 18px -4px rgba(99, 102, 241, 0.5);
}

.blog-card:has(.blog-thumb-2):hover .blog-readmore { background: var(--grad-accent); box-shadow: 0 8px 18px -4px rgba(16, 185, 129, 0.5); }
.blog-card:has(.blog-thumb-3):hover .blog-readmore { background: var(--grad-warm); box-shadow: 0 8px 18px -4px rgba(245, 158, 11, 0.5); }

.blog-cta-wrap {
    text-align: center;
    margin-top: 48px;
}


/* ════════════════════════════════════════
   FAQ
   ════════════════════════════════════════ */

.faq-section {
    background: var(--bg-soft);
    position: relative;
}

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.25s;
}

.faq-item:hover {
    border-color: var(--border-2);
}

.faq-item.open {
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.faq-q {
    padding: 22px 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.faq-q-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s;
}

.faq-q-icon::before,
.faq-q-icon::after {
    content: '';
    position: absolute;
    background: var(--text);
    top: 50%;
    left: 50%;
    transition: all 0.3s;
}

.faq-q-icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-q-icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.faq-item.open .faq-q-icon {
    background: var(--grad-primary);
    transform: rotate(45deg);
}

.faq-item.open .faq-q-icon::before,
.faq-item.open .faq-q-icon::after {
    background: white;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14.5px;
    color: var(--text-3);
    line-height: 1.7;
    padding: 0 26px;
    font-weight: 500;
}

.faq-item.open .faq-a {
    max-height: 400px;
    padding: 0 26px 22px;
}


/* ════════════════════════════════════════
   CTA
   ════════════════════════════════════════ */


/* ════════════════════════════════════════
   NEWSLETTER CTA — Enhanced split design
   ════════════════════════════════════════ */

.cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 600px 400px at 15% 30%, rgba(99, 102, 241, 0.4) 0%, transparent 60%), radial-gradient(ellipse 500px 350px at 85% 70%, rgba(16, 185, 129, 0.25) 0%, transparent 60%), radial-gradient(circle at 50% 100%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}


/* Floating decorative shapes */

.cta-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    opacity: 0.5;
    animation: floatShape 8s ease-in-out infinite;
}

.cta-shape-1 {
    top: 10%;
    left: 8%;
    width: 180px;
    height: 180px;
    background: var(--primary);
}

.cta-shape-2 {
    bottom: 15%;
    right: 10%;
    width: 140px;
    height: 140px;
    background: var(--accent-light);
    animation-delay: -3s;
}

.cta-shape-3 {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: #ec4899;
    animation-delay: -1.5s;
    opacity: 0.3;
}

@keyframes floatShape {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(20px, -30px);
    }
}

.cta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}


/* LEFT SIDE - Content */

.cta-left {
    text-align: left;
}

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cta-eyebrow::before {
    content: '✨';
    font-size: 14px;
}

.cta-section h2 {
    font-size: clamp(36px, 4.8vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-bottom: 18px;
    color: white;
}

.cta-section h2 .highlight {
    background: linear-gradient(135deg, #a5b4fc 0%, #6ee7b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-section p.cta-desc {
    font-size: 16.5px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
    font-weight: 500;
    line-height: 1.65;
    max-width: 460px;
}


/* Stats row */

.cta-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.cta-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cta-stat-num {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cta-stat-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
    height: 40px;
    align-self: center;
}


/* Form */

.cta-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.3s;
}

.cta-form:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.cta-form input {
    flex: 1;
    padding: 15px 18px;
    border: none;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 500;
    background: white;
    color: var(--text);
    outline: none;
}

.cta-form input::placeholder {
    color: var(--text-4);
}

.cta-form button {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    padding: 15px 26px;
    border-radius: 10px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.25s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.5);
}

.cta-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.6);
}

.cta-form button svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.cta-form button:hover svg {
    transform: translateX(3px);
}

.cta-trust {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.cta-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.cta-trust-item svg {
    width: 14px;
    height: 14px;
    color: var(--accent-soft);
}


/* RIGHT SIDE - Visual Card Stack */

.cta-right {
    position: relative;
    height: 420px;
    display: grid;
    place-items: center;
}

.cta-mock {
    position: absolute;
    background: white;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4);
    width: 280px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-mock-1 {
    top: 20px;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    z-index: 1;
    background: white;
}

.cta-mock-2 {
    top: 80px;
    left: 50%;
    transform: translateX(-50%) rotate(3deg);
    z-index: 2;
}

.cta-mock-3 {
    top: 150px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    z-index: 3;
}

.cta-right:hover .cta-mock-1 {
    transform: translateX(-65%) rotate(-10deg);
}

.cta-right:hover .cta-mock-2 {
    transform: translateX(-50%) rotate(3deg) translateY(-10px);
}

.cta-right:hover .cta-mock-3 {
    transform: translateX(-35%) rotate(2deg);
}

.cta-mock-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.cta-mock-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cta-mock-1 .cta-mock-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.cta-mock-2 .cta-mock-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
}

.cta-mock-3 .cta-mock-icon {
    background: linear-gradient(135deg, #ddd6fe 0%, #a78bfa 100%);
}

.cta-mock-meta {
    flex: 1;
    min-width: 0;
}

.cta-mock-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 100px;
    margin-bottom: 4px;
}

.cta-mock-1 .cta-mock-tag {
    background: #fef3c7;
    color: #b45309;
}

.cta-mock-2 .cta-mock-tag {
    background: #d1fae5;
    color: #065f46;
}

.cta-mock-3 .cta-mock-tag {
    background: #ede9fe;
    color: #5b21b6;
}

.cta-mock-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.cta-mock-body {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.5;
    margin-bottom: 12px;
    font-weight: 500;
}

.cta-mock-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-4);
    font-weight: 600;
}

.cta-mock-date {
    color: var(--primary);
}

.cta-mock-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* ════════════════════════════════════════
   COMING SOON SECTION
   ════════════════════════════════════════ */

.coming-soon-section {
    padding: clamp(48px, 7vw, 80px) 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.coming-soon-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 30%, rgba(99, 102, 241, 0.06) 0%, transparent 40%), radial-gradient(circle at 85% 70%, rgba(16, 185, 129, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.coming-soon-inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.coming-soon-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.coming-soon-eyebrow::before {
    content: '🚀';
    font-size: 12px;
}

.coming-soon-section h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 12px;
}

.coming-soon-section h2 .gradient {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coming-soon-section p.subtitle {
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--text-3);
    margin-bottom: clamp(28px, 4vw, 40px);
    font-weight: 500;
    line-height: 1.55;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.coming-soon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(10px, 1.5vw, 16px);
    margin-bottom: clamp(24px, 3vw, 36px);
}

.coming-card {
    background: white;
    border: 2px dashed var(--border-2);
    border-radius: 14px;
    padding: clamp(18px, 2.5vw, 24px) clamp(12px, 2vw, 18px);
    text-align: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.coming-card:hover {
    border-color: var(--primary);
    border-style: solid;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    background: white;
}

.coming-emoji {
    font-size: clamp(28px, 3vw, 32px);
    margin-bottom: 10px;
    display: inline-block;
    filter: grayscale(0.3);
    opacity: 0.85;
    transition: all 0.3s;
}

.coming-card:hover .coming-emoji {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

.coming-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}

.coming-tag {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.coming-soon-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-3);
    transition: all 0.25s;
}

.coming-soon-cta:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(99, 102, 241, 0.2);
}

.coming-soon-cta .pulse-dot {
    width: 7px;
    height: 7px;
    background: var(--accent-light);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 8px var(--accent-light);
}

.coming-soon-cta .pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: var(--accent-light);
    border-radius: 50%;
    opacity: 0.4;
    animation: ping 2s ease-out infinite;
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}


/* ════════════════════════════════════════
   FOOTER — 3-column design
   ════════════════════════════════════════ */

footer {
    background: #0a0e1a;
    color: rgba(255, 255, 255, 0.65);
    padding: 80px 0 0;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
}

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1.3fr 1fr;
    gap: 64px;
    padding-bottom: 64px;
}

.footer-brand .logo {
    margin-bottom: 20px;
}

.footer-brand .logo-text {
    color: white;
}

.footer-brand .logo-text .em {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand p {
    font-size: 14.5px;
    line-height: 1.75;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 28px;
}

.footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.25s;
}

.footer-social a svg {
    width: 16px;
    height: 16px;
}

.footer-social a:hover {
    color: white;
    border-color: transparent;
    transform: translateY(-3px);
}

.footer-social a.fb:hover {
    background: #1877f2;
    box-shadow: 0 6px 14px -2px rgba(24, 119, 242, 0.5);
}

.footer-social a.ig:hover {
    background: linear-gradient(135deg, #f09433, #dc2743, #bc1888);
    box-shadow: 0 6px 14px -2px rgba(220, 39, 67, 0.5);
}

.footer-social a.wa:hover {
    background: #25d366;
    box-shadow: 0 6px 14px -2px rgba(37, 211, 102, 0.5);
}

.footer-social a.yt:hover {
    background: #ff0000;
    box-shadow: 0 6px 14px -2px rgba(255, 0, 0, 0.5);
}

.footer-social a.pin:hover {
    background: #e60023;
    box-shadow: 0 6px 14px -2px rgba(230, 0, 35, 0.5);
}

.footer-social a.li:hover {
    background: #0a66c2;
    box-shadow: 0 6px 14px -2px rgba(10, 102, 194, 0.5);
}

.footer-social a.rss:hover {
    background: #f26522;
    box-shadow: 0 6px 14px -2px rgba(242, 101, 34, 0.5);
}

.footer-h4 {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 24px;
    letter-spacing: -0.015em;
}

.footer-posts {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-post {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: start;
    cursor: pointer;
}

.footer-post-thumb {
    width: 80px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: 32px;
    background: var(--grad-primary);
    flex-shrink: 0;
}

.footer-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footer-post:nth-child(1) .footer-post-thumb {
    background: var(--grad-primary);
}

.footer-post:nth-child(2) .footer-post-thumb {
    background: var(--grad-accent);
}

.footer-post:nth-child(3) .footer-post-thumb {
    background: var(--grad-warm);
}

.footer-post-content {
    min-width: 0;
}

.footer-post-title {
    font-size: 14px;
    font-weight: 700;
    color: white;
    line-height: 1.4;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.footer-post:hover .footer-post-title {
    color: var(--primary-glow);
}

.footer-post-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 500;
}

.footer-post-meta .author {
    color: var(--primary-glow);
    font-weight: 600;
}

.footer-newsletter p {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
    font-weight: 500;
}

.footer-newsletter-form {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.footer-newsletter-form:focus-within {
    border-color: var(--primary);
}

.footer-newsletter-form input {
    flex: 1;
    padding: 13px 16px;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
}

.footer-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter-form button {
    background: var(--accent-light);
    color: white;
    border: none;
    padding: 13px 24px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.footer-newsletter-form button:hover {
    background: var(--accent);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13.5px;
}

.footer-bottom span {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.footer-bottom-links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    transition: color 0.2s;
}

.footer-bottom-links a:hover {
    color: white;
}


/* RESPONSIVE */

@media (max-width: 1024px) {
    .feats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-grid {
        grid-template-columns: 1fr;
    }
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .blog-card:nth-child(3) {
        grid-column: 1 / -1;
    }
    .compare-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
    .compare-cell {
        padding: 16px 14px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
     :root {
        --pad: 18px;
    }
    /* Mobile drawer — slides down from under the nav.
       Closed by default; opens when .menu-toggle adds .is-open. */
    .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: white;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 14px 28px -16px rgba(15, 23, 42, 0.18);
        padding: 16px 18px 22px;
        margin-left: 0;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.28s ease, opacity 0.22s ease, visibility 0.22s;
        z-index: 99;
    }
    .nav-menu.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .nav-menu .nav-link {
        padding: 12px 14px;
        font-size: 15px;
        border-radius: 10px;
        justify-content: space-between;
    }
    /* Tools dropdown becomes inline accordion on mobile */
    .nav-menu .nav-item { width: 100%; position: static; }
    .nav-menu .nav-item .nav-link { width: 100%; text-align: left; }
    .nav-menu .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--bg-soft);
        border: 1px solid var(--border);
        min-width: 0;
        margin-top: 6px;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        transition: max-height 0.28s ease, padding 0.2s ease;
    }
    .nav-menu .nav-item.open .dropdown {
        max-height: 600px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .menu-toggle {
        display: inline-flex;
    }
    .nav-inner {
        height: 64px;
    }
    .search-overlay,
    .search-backdrop {
        top: 64px;
    }
    .hero {
        padding: 64px 0 80px;
    }
    .hero h1 {
        font-size: 44px;
    }
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .section,
    .cta-section,
    .compare-section {
        padding: 64px 0;
    }
    .cta-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    .cta-left {
        text-align: center;
    }
    .cta-section p.cta-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .cta-stats {
        justify-content: center;
    }
    .cta-form {
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
        padding: 8px;
    }
    .cta-trust {
        justify-content: center;
    }
    .cta-right {
        height: 360px;
    }
    .cta-mock {
        width: 240px;
    }
    .cta-form {
        flex-direction: column;
        padding: 8px;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-card:nth-child(3) {
        grid-column: auto;
    }
    .trusted-logos {
        gap: 32px;
    }
    .trusted-logo {
        font-size: 18px;
    }
    .compare-row {
        grid-template-columns: 1fr;
    }
    .compare-cell {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .compare-cell:last-child {
        border-bottom: none;
    }
    .compare-header {
        display: none;
    }
    .compare-cell-product {
        padding-bottom: 8px;
        padding-top: 16px;
        background: var(--bg-soft);
    }
    .compare-cell-feature {
        padding-top: 16px;
        font-weight: 800;
    }
    .tools-grid {
        grid-template-columns: 1fr;
    }
    /* Topbar mobile */
    .topbar-inner {
        height: 36px;
        padding: 0 var(--pad);
        gap: 8px;
    }
    .social-label {
        display: none;
    }
    .topbar-social {
        gap: 3px;
    }
    .social-link {
        width: 26px;
        height: 26px;
    }
    .social-link svg {
        width: 12px;
        height: 12px;
    }
    .topbar-link {
        padding: 4px 8px;
        font-size: 12px;
    }
    /* Footer mobile */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-bottom: 48px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom-links {
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .feats-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-cta a {
        width: 100%;
        justify-content: center;
    }
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.tool,
.feat,
.step,
.tool:nth-child(2),
.feat:nth-child(2),
.step:nth-child(2),
.blog-card:nth-child(2) {
    animation-delay: 0.08s;
}
.tool:nth-child(3),
.feat:nth-child(3),
.step:nth-child(3),
.blog-card:nth-child(3) {
    animation-delay: 0.16s;
}
.tool:nth-child(4),
.feat:nth-child(4) {
    animation-delay: 0.24s;
}
section[id] {
    scroll-margin-top: 90px;
}


/* ════════════════════════════════════════
   BLOG INDEX PAGE
   ════════════════════════════════════════ */

/* Hero (compact variant of homepage hero) */
.blog-hero {
    padding: 70px 0 60px;
    position: relative;
    overflow: hidden;
}

.blog-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.blog-hero h1 {
    font-size: clamp(40px, 6.5vw, 64px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 20px;
    color: var(--text);
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.blog-hero h1 .gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #10b981 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 8s ease infinite;
}

.blog-hero .hero-sub {
    margin-bottom: 32px;
}

/* Search bar */
.blog-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px 6px 6px 18px;
    max-width: 560px;
    margin: 0 auto;
    box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.15);
    transition: all 0.25s;
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.blog-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 8px 28px -8px rgba(99, 102, 241, 0.35), 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.blog-search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-4);
    flex-shrink: 0;
}

.blog-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    padding: 12px 4px;
    min-width: 0;
}

.blog-search input::placeholder {
    color: var(--text-4);
}

.blog-search button {
    background: var(--grad-primary);
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.35);
}

.blog-search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(99, 102, 241, 0.45);
}

/* Category filters section wrapper (pill row CSS lives further down) */
.blog-filters-section {
    padding: 24px 0 8px;
    position: relative;
    z-index: 3;
}

.filter-count {
    background: var(--bg-soft);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 100px;
    min-width: 22px;
    text-align: center;
    transition: all 0.2s;
}

/* Section header row (eyebrow + action on the right) */
.section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.section-head-row .section-eyebrow {
    margin: 0;
}

.see-all-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    transition: gap 0.2s;
}

.see-all-link:hover {
    text-decoration: underline;
}

.blog-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
}

.blog-sort select {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}

.blog-sort select:hover {
    border-color: var(--primary);
}

.blog-sort select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Featured post */
.featured-post-section {
    padding-top: 48px;
    padding-bottom: 32px;
}

.featured-post {
    background: white;
    border: 1px solid var(--border);
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s, border-color 0.4s;
    position: relative;
}

/* Soft halo that intensifies on hover */
.featured-post::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(217, 70, 239, 0.3), rgba(244, 63, 94, 0.3));
    border-radius: 30px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s;
    filter: blur(12px);
}

.featured-post:hover::before { opacity: 0.6; }

.featured-post:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 32px 64px -20px rgba(99, 102, 241, 0.4);
}

/* Side-by-side layout (thumb left, content right) on wide screens */
.featured-post-link {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 880px) {
    .featured-post-link { grid-template-columns: 1fr; }
}

.featured-post-thumb {
    position: relative;
    background: var(--grad-primary);
    min-height: 420px;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
}

/* Dot grid texture */
.featured-post-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}

/* Big radial light to give depth */
.featured-post-thumb::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -25%;
    width: 80%;
    height: 110%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    filter: blur(20px);
}

.featured-post-emoji {
    font-size: 180px;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
    position: relative;
    z-index: 2;
    animation: featuredEmojiFloat 7s ease-in-out infinite;
    transform-origin: center;
}

.featured-post:hover .featured-post-emoji {
    animation-play-state: paused;
    transform: scale(1.12) rotate(-7deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes featuredEmojiFloat {
    0%, 100% { transform: translateY(0)    rotate(-3deg); }
    50%      { transform: translateY(-14px) rotate(3deg); }
}

.featured-badge {
    position: absolute;
    top: 22px;
    left: 22px;
    background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
    color: white;
    padding: 8px 16px 8px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 8px 24px -6px rgba(244, 63, 94, 0.55),
                0 0 0 4px rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.featured-badge::before {
    content: '⭐';
    font-size: 14px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    animation: badgeStar 3s ease-in-out infinite;
}

@keyframes badgeStar {
    0%, 100% { transform: scale(1)    rotate(0deg); }
    50%      { transform: scale(1.15) rotate(15deg); }
}

.featured-post-content {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}

@media (max-width: 540px) {
    .featured-post-content { padding: 32px 24px; }
    .featured-post-thumb { min-height: 280px; }
    .featured-post-emoji { font-size: 140px; }
}

.featured-post-title {
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 18px;
    transition: color 0.25s;
}

.featured-post:hover .featured-post-title {
    color: var(--primary);
}

.featured-post-excerpt {
    font-size: 15.5px;
    color: var(--text-2);
    line-height: 1.65;
    margin-bottom: 28px;
    font-weight: 500;
}

.featured-post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: auto;
}

.featured-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.author-role {
    font-size: 12px;
    color: var(--text-4);
    font-weight: 600;
}

/* Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 56px;
    flex-wrap: wrap;
}

.page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled):not(.active) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.4);
}

.page-dots {
    color: var(--text-4);
    font-weight: 700;
    padding: 0 6px;
    -webkit-user-select: none;
    user-select: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .blog-hero h1,
    .blog-search {
        opacity: 1;
        animation: none;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .featured-post-thumb {
        min-height: 240px;
    }
    .featured-post-emoji {
        font-size: 96px;
    }
    .featured-post-content {
        padding: 28px;
    }
}

@media (max-width: 640px) {
    .blog-hero {
        padding: 48px 0 40px;
    }
    .blog-search {
        padding: 6px 6px 6px 14px;
        border-radius: 14px;
    }
    .blog-search button {
        padding: 11px 16px;
        font-size: 13px;
    }
    .blog-filters {
        gap: 8px;
    }
    .blog-filter-pill {
        padding: 8px 14px;
        font-size: 13px;
    }
    .featured-post-content {
        padding: 24px;
    }
    .featured-post-foot {
        flex-direction: column;
        align-items: flex-start;
    }
    .blog-pagination {
        gap: 4px;
    }
    .page-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }
}


/* ════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ════════════════════════════════════════ */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--primary);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    z-index: 9999;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 16px;
    outline: 3px solid white;
    outline-offset: 2px;
}


/* ════════════════════════════════════════
   BREADCRUMBS
   ════════════════════════════════════════ */

.breadcrumbs-wrap {
    padding: 16px 0 4px;
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-4);
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumbs a {
    color: var(--text-3);
    transition: color 0.15s;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs [aria-current="page"] {
    color: var(--text-2);
    max-width: 40ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumbs-sep {
    color: var(--text-5);
    font-weight: 400;
    opacity: 0.55;
    font-size: 14px;
}


/* ════════════════════════════════════════
   SCALABLE FILTER ROW (horizontal scroll w/ fade edges + arrows)
   ════════════════════════════════════════ */

.blog-filter-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-filters {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
    flex: 1;
    /* Edge fade — masks both sides so overflowing pills fade out instead of getting cut */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

.blog-filters::-webkit-scrollbar {
    display: none;
}

/* When at scroll start/end, drop the corresponding mask so first/last pill isn't faded for no reason */
.blog-filter-row[data-at-start="true"]  .blog-filters {
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
    mask-image:         linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
}
.blog-filter-row[data-at-end="true"]    .blog-filters {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
    mask-image:         linear-gradient(to right, transparent 0, black 24px, black 100%);
}
.blog-filter-row[data-at-start="true"][data-at-end="true"] .blog-filters {
    -webkit-mask-image: none;
    mask-image: none;
}

.blog-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 10px 16px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.blog-filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.blog-filter-pill.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.4);
}

.blog-filter-pill.active .filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Scroll arrows — hidden when row fits or scroll is at end */
.filter-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
}

.blog-filter-row[data-overflow="true"] .filter-arrow {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.blog-filter-row[data-at-start="true"]  .filter-arrow-left,
.blog-filter-row[data-at-end="true"]    .filter-arrow-right {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
}

.filter-arrow:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.05);
}

/* Subcategory pill row — visually connected child of the active category */
.blog-subfilter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 16px;
    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0.02));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 14px;
}

.blog-subfilter-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 6px;
    padding-left: 2px;
}

.blog-subfilter-label svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.blog-subfilter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 5px 11px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    transition: all 0.18s;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.005em;
}

.blog-subfilter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.blog-subfilter-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 10px -3px rgba(99, 102, 241, 0.4);
}

.blog-subfilter-pill[data-empty="true"] {
    opacity: 0.45;
}

.blog-subfilter-pill[data-empty="true"]:hover {
    opacity: 0.7;
}

.blog-subfilter-pill .filter-count {
    background: var(--bg-soft);
    color: var(--text-4);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 100px;
    min-width: 18px;
    text-align: center;
    font-weight: 800;
    transition: all 0.18s;
}

.blog-subfilter-pill.active .filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}


/* ════════════════════════════════════════
   BLOG CARD — re-style as anchor wrapper
   (now using <article><a class="blog-card-link">…)
   ════════════════════════════════════════ */

.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}


/* ════════════════════════════════════════
   RESULT COUNT + EMPTY STATE
   ════════════════════════════════════════ */

.result-count {
    font-size: 13px;
    color: var(--text-3);
    margin: 6px 0 0;
    font-weight: 500;
}

.result-count strong {
    color: var(--text);
    font-weight: 700;
}

.blog-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--bg-soft);
    border-radius: 24px;
    border: 1px dashed var(--border-2);
}

.blog-empty-emoji {
    font-size: 64px;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
}

.blog-empty h1,
.blog-empty h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.blog-empty p {
    color: var(--text-3);
    max-width: 480px;
    margin: 0 auto 24px;
    line-height: 1.6;
}


/* ════════════════════════════════════════
   FEATURED POST — anchor wrapper variant
   ════════════════════════════════════════ */

.featured-post-link {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    color: inherit;
    text-decoration: none;
}

@media (max-width: 900px) {
    .featured-post-link {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════
   SINGLE POST PAGE
   ════════════════════════════════════════ */

.post-article {
    background: var(--bg);
}

.post-hero {
    padding: 24px 0 60px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* Soft decorative orbs in the hero background */
.post-hero::before,
.post-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}

.post-hero::before {
    top: -120px;
    left: -80px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
}

.post-hero::after {
    bottom: -120px;
    right: -80px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.18) 0%, transparent 70%);
}

.post-hero > .container { position: relative; z-index: 1; }

.post-breadcrumbs {
    padding: 0 0 24px !important;
}

.post-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-4);
}

.post-hero-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-bg);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s;
    text-decoration: none;
}

.post-hero-cat:hover {
    background: var(--primary);
    color: white;
}

.post-hero-title {
    font-size: clamp(34px, 5.4vw, 58px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--text);
    margin-bottom: 20px;
    max-width: 880px;
}

.post-hero-excerpt {
    font-size: clamp(17px, 1.7vw, 21px);
    color: var(--text-3);
    line-height: 1.6;
    max-width: 760px;
    margin-bottom: 36px;
    font-weight: 500;
}

.post-hero-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid rgba(99, 102, 241, 0.14);
    border-bottom: 1px solid rgba(99, 102, 241, 0.14);
    margin-bottom: 36px;
    position: relative;
}

/* Subtle gradient line on the borders */
.post-hero-byline::before,
.post-hero-byline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
}
.post-hero-byline::before { top: -1px; }
.post-hero-byline::after  { bottom: -1px; }

.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-4);
}

.post-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.post-hero-visual {
    position: relative;
    background: var(--grad-primary);
    border-radius: 28px;
    height: 380px;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 32px 64px -20px rgba(99, 102, 241, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* Decorative dot grid + gradient orb on the visual */
.post-hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.6;
    pointer-events: none;
}

.post-hero-visual::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -20%;
    width: 70%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
    pointer-events: none;
    filter: blur(20px);
}

.post-hero-emoji {
    font-size: 200px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.22));
    position: relative;
    z-index: 2;
    animation: heroEmojiFloat 6s ease-in-out infinite;
}

@keyframes heroEmojiFloat {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-12px) rotate(2deg); }
}

/* Variant tints to match blog card thumbnails */
.post-hero-thumb-2 .post-hero-visual { background: var(--grad-accent); }
.post-hero-thumb-3 .post-hero-visual { background: var(--grad-warm); }


/* Body grid: main + sidebar */
.post-body-wrap {
    padding: 60px 0;
    background: var(--bg);
}

.post-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
}

.post-content {
    max-width: 720px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-2);
}

.post-content > * + * {
    margin-top: 1.25em;
}

.post-lead {
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-3);
    border-left: 4px solid var(--primary);
    padding: 4px 0 4px 20px;
    background: linear-gradient(to right, rgba(99,102,241,0.04), transparent 60%);
    border-radius: 0 8px 8px 0;
}

.post-content h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--text);
    margin-top: 2.4em !important;
    margin-bottom: 0.6em !important;
    scroll-margin-top: 100px;
    position: relative;
    padding-left: 16px;
}

/* Gradient accent bar before each h2 */
.post-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    border-radius: 100px;
    background: var(--grad-primary);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.35);
}

.post-content h3 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-top: 1.8em !important;
    margin-bottom: 0.5em !important;
    scroll-margin-top: 100px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

/* Subtle accent dot before each h3 */
.post-content h3::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
    transform: translateY(-3px);
}

/* Drop-cap on the first paragraph (only the very first one inside .post-content) */
.post-content > p:first-of-type::first-letter {
    float: left;
    font-size: 64px;
    line-height: 0.9;
    font-weight: 800;
    margin: 6px 12px 0 0;
    color: var(--primary);
    background: linear-gradient(135deg, var(--primary), #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.04em;
    font-family: var(--font);
}

.post-content ul,
.post-content ol {
    padding-left: 0;
    list-style: none;
}

.post-content li {
    position: relative;
    margin-top: 0.7em;
    padding-left: 32px;
    line-height: 1.7;
}

/* Custom bullets — gradient diamond */
.post-content ul > li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.7em;
    width: 8px;
    height: 8px;
    background: var(--grad-primary);
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

/* Numbered lists — gradient circle counters */
.post-content ol {
    counter-reset: post-ol;
}
.post-content ol > li {
    counter-increment: post-ol;
    padding-left: 38px;
}
.post-content ol > li::before {
    content: counter(post-ol);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--grad-primary);
    color: white;
    font-size: 12px;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.4);
}

.post-content blockquote {
    position: relative;
    border-left: none;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(217, 70, 239, 0.04) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    padding: 28px 32px 28px 64px;
    border-radius: 18px;
    color: var(--text);
    font-style: italic;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 500;
    margin: 1.8em 0 !important;
    box-shadow: 0 8px 24px -16px rgba(99, 102, 241, 0.25);
}

/* Big decorative quote mark */
.post-content blockquote::before {
    content: '"';
    position: absolute;
    top: -12px;
    left: 16px;
    font-size: 96px;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--primary);
    opacity: 0.25;
    line-height: 1;
    font-style: normal;
    font-weight: 700;
}

/* Optional callout box — usage: <div class="post-callout"> ... </div> */
.post-callout {
    margin: 1.8em 0;
    padding: 20px 24px 20px 60px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(217, 70, 239, 0.03) 100%);
    border-left: 4px solid var(--primary);
    border-radius: 0 14px 14px 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text);
    position: relative;
}

.post-callout::before {
    content: '💡';
    position: absolute;
    left: 18px;
    top: 18px;
    font-size: 22px;
    line-height: 1;
}

.post-callout.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
    border-left-color: #f59e0b;
}
.post-callout.warning::before { content: '⚠️'; }

.post-callout.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(8, 145, 178, 0.04) 100%);
    border-left-color: #10b981;
}
.post-callout.success::before { content: '✅'; }

.post-callout strong { color: var(--text); font-weight: 800; }

.post-content code {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.92em;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--primary);
}

.post-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(99, 102, 241, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}

.post-content a:hover {
    text-decoration-color: var(--primary);
}

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 48px !important;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.post-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    margin-right: 4px;
}

.post-tags-label::before {
    content: '#';
    font-size: 16px;
    color: var(--primary);
    font-weight: 800;
}

.post-tag {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.22s;
}

.post-tag:hover {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(99, 102, 241, 0.45);
}

/* Share — magazine-style row */
.post-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 32px !important;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(217, 70, 239, 0.02) 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.post-share-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    margin-right: 6px;
    letter-spacing: -0.01em;
}

.post-share-label::before {
    content: '✨';
    font-size: 18px;
}

.post-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--text-3);
    transition: all 0.22s;
}

.post-share-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.post-share-btn:hover {
    transform: translateY(-3px) scale(1.05);
    color: white;
    border-color: transparent;
    box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.18);
}

.post-share-btn:hover svg { transform: scale(1.05); }

.post-share-btn.tw:hover { background: #000; }
.post-share-btn.fb:hover { background: #1877F2; }
.post-share-btn.li:hover { background: #0A66C2; }
.post-share-btn.wa:hover { background: #25D366; }

/* Author bio card — gradient hero treatment */
.post-author-card {
    margin-top: 48px !important;
    padding: 28px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 22px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #ffffff 100%);
    display: flex;
    gap: 22px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.post-author-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.post-author-card > * { position: relative; }

.author-avatar.large {
    width: 72px;
    height: 72px;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 10px 26px -6px rgba(99, 102, 241, 0.55),
                0 0 0 4px white,
                0 0 0 5px rgba(99, 102, 241, 0.18);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.post-author-bio {
    flex: 1;
    min-width: 0;
}

.post-author-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.post-author-name::after {
    content: 'Editorial';
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 3px 9px;
    border-radius: 100px;
}

.post-author-bio p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

/* Sidebar */
.post-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.sidebar-h4 {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-4);
    margin: 0 0 16px;
}

.sidebar-toc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-toc a {
    color: var(--text-3);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}

.sidebar-toc a:hover {
    background: var(--primary-bg);
    color: var(--primary);
    border-left-color: var(--primary);
}

.sidebar-newsletter p {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.55;
    margin: 0 0 14px;
}

.sidebar-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-newsletter-form input {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.sidebar-newsletter-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.sidebar-newsletter-form button {
    background: var(--grad-primary);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.2s;
}

.sidebar-newsletter-form button:hover {
    transform: translateY(-1px);
}

/* Related posts */
.related-posts-section {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 1024px) {
    .post-body-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .post-sidebar {
        position: static;
        max-width: 720px;
    }
}

@media (max-width: 640px) {
    .post-hero {
        padding: 16px 0 40px;
    }
    .post-hero-visual {
        height: 220px;
        border-radius: 16px;
    }
    .post-hero-emoji {
        font-size: 110px;
    }
    .post-hero-byline {
        flex-direction: column;
        align-items: flex-start;
    }
    .post-content {
        font-size: 16px;
    }
    .post-content h2 { font-size: 24px; }
    .post-content h3 { font-size: 19px; }
    .post-author-card {
        flex-direction: column;
        gap: 14px;
        padding: 20px;
    }
    .post-share {
        padding: 16px;
    }
    .filter-arrow {
        display: none;
    }
}


/* ════════════════════════════════════════
   PAGE HERO — shared by about, contact, legal
   ════════════════════════════════════════ */
.page-hero {
    padding: 70px 0 50px;
    position: relative;
    overflow: hidden;
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.page-hero h1 {
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 18px;
    color: var(--text);
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.page-hero h1 .gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #10b981 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 8s ease infinite;
}

.page-hero .hero-sub {
    margin-bottom: 24px;
    opacity: 0;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}


/* ════════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════════ */
.about-stats-section {
    padding: 32px 0 48px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 24px;
    box-shadow: var(--shadow-soft);
}

.about-stat {
    text-align: center;
    border-right: 1px solid var(--border);
}

.about-stat:last-child {
    border-right: none;
}

.about-stat-num {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.about-stat-num span {
    font-size: 0.6em;
    opacity: 0.7;
}

.about-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about-mission-section {
    background: var(--bg-soft);
}

.about-mission {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}

.about-mission-text h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text);
    margin: 12px 0 20px;
}

.about-mission-text .gradient {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-mission-text p {
    color: var(--text-3);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.about-mission-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.mission-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 20px;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mission-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.mission-card-1 { transform: rotate(-2deg); }
.mission-card-2 { transform: rotate(1.5deg); margin-top: 16px; }
.mission-card-3 { transform: rotate(1.5deg); margin-top: -8px; }
.mission-card-4 { transform: rotate(-1.5deg); }

.mission-card:hover { transform: translateY(-4px) rotate(0); }

.mission-emoji {
    font-size: 40px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

.mission-card-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
}

.about-values-section {
    background: var(--bg);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.value-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.value-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.value-card:hover::before {
    transform: scaleX(1);
}

.value-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.value-card h3 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 8px;
}

.value-card p {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.6;
    margin: 0;
}

.about-team-section {
    background: var(--bg-soft);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    gap: 24px;
    justify-content: center;
}

.team-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.25s;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.team-avatar {
    width: 72px;
    height: 72px;
    background: var(--grad-primary);
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 22px;
    margin: 0 auto 16px;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.4);
}

.team-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 4px;
}

.team-role {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 12px;
}

.team-bio {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.6;
    margin: 0 0 20px;
}

.team-social {
    display: inline-flex;
    gap: 8px;
}

.team-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-3);
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.team-social a:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.team-social svg {
    width: 14px;
    height: 14px;
}

.about-cta-section {
    background: var(--bg);
}

.about-cta {
    background: var(--grad-primary);
    border-radius: 28px;
    padding: 56px 40px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.about-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.about-cta h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    position: relative;
}

.about-cta p {
    font-size: 16px;
    opacity: 0.95;
    max-width: 540px;
    margin: 0 auto 32px;
    line-height: 1.6;
    position: relative;
}

.about-cta-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.about-cta .btn-primary {
    background: white;
    color: var(--primary);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.2);
}

.about-cta .btn-primary:hover {
    background: white;
    color: var(--primary);
    transform: translateY(-2px);
}

.about-cta .btn-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.about-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
}


/* ════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════ */
.contact-section {
    padding-bottom: 64px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    transition: all 0.25s;
}

.contact-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.contact-card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.contact-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px;
}

.contact-card p {
    font-size: 13.5px;
    color: var(--text-3);
    line-height: 1.55;
    margin: 0 0 12px;
}

.contact-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-link:hover { text-decoration: underline; }
.contact-link.muted { color: var(--text-4); }

.contact-social {
    display: inline-flex;
    gap: 8px;
}

.contact-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-3);
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.contact-social a:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.contact-social svg {
    width: 14px;
    height: 14px;
}

.contact-form-wrap {
    background: white;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-soft);
}

.contact-form-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 6px;
}

.contact-form-sub {
    font-size: 13.5px;
    color: var(--text-4);
    margin: 0 0 28px;
}

.required-mark {
    color: #f43f5e;
    font-weight: 700;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    gap: 20px;
}

.form-row-2 {
    grid-template-columns: 1fr 1fr;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: -0.005em;
}

/* Cover every text-like input type (was previously only text/email, which left
   number/tel/search/url/date unstyled and falling back to browser defaults). */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field input[type="tel"],
.form-field input[type="search"],
.form-field input[type="url"],
.form-field input[type="password"],
.form-field input[type="date"],
.form-field input[type="datetime-local"],
.form-field input[type="time"],
.form-field select,
.form-field textarea {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text);
    background: var(--bg-soft);
    outline: none;
    transition: all 0.2s;
    font-weight: 500;
    width: 100%;
}

/* Hide the browser-native up/down spinner on number inputs — looks ugly
   inline next to clean rounded fields, and these tools always have their
   own UI for value changes anyway. */
.form-field input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.form-field input[type="number"]::-webkit-outer-spin-button,
.form-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ════════════════════════════════════════
   IG-BIO — Customize card polish
   ════════════════════════════════════════ */
.ig-customize-card {
    background:
        radial-gradient(circle at 0% 0%,   rgba(236, 72, 153, 0.05) 0%, transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 38%),
        white;
}

/* Field labels with leading icons — adds visual rhythm to the form */
.ig-field label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ig-field-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 13px;
    line-height: 1;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.10), rgba(139, 92, 246, 0.08));
    flex-shrink: 0;
}

/* Pink/violet brand focus ring on customize fields (overrides global indigo) */
.ig-field input:focus {
    border-color: #ec4899;
    background: white;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}

/* Tighter hover affordance on idle */
.ig-field input:hover:not(:focus) {
    border-color: rgba(139, 92, 246, 0.35);
    background: white;
}

/* Generate button busy state — shown while the AI request is in flight */
.gen-btn.is-busy {
    opacity: 0.85;
    cursor: progress;
    background: linear-gradient(135deg, #ec4899, #d946ef, #8b5cf6);
}
.ig-genbtn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: igGenSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes igGenSpin {
    to { transform: rotate(360deg); }
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.55;
}

.form-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
}

.form-checkbox label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    line-height: 1.55;
    cursor: pointer;
}

.form-checkbox label a {
    color: var(--primary);
    text-decoration: underline;
}

.form-submit {
    align-self: flex-start;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}


/* ════════════════════════════════════════
   LEGAL PAGES (terms, disclaimer, privacy)
   ════════════════════════════════════════ */
.legal-hero {
    padding: 56px 0 40px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}

.legal-hero-inner {
    text-align: center;
    max-width: 720px;
}

.legal-hero h1 {
    font-size: clamp(32px, 5vw, 48px);
}

.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-4);
    background: white;
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 100px;
    margin-top: 8px;
}

.legal-meta svg {
    color: var(--primary);
}

.legal-page {
    padding-top: 32px;
}

.legal-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.legal-toc-wrap {
    position: sticky;
    top: 90px;
}

.legal-toc h4 {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    margin: 0 0 14px;
}

.legal-toc nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-toc a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-3);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s;
    line-height: 1.4;
}

.legal-toc a:hover {
    background: var(--primary-bg);
    color: var(--primary);
}

.legal-toc .toc-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-5);
    flex-shrink: 0;
}

.legal-toc a:hover .toc-num {
    color: var(--primary);
}

.legal-content {
    max-width: 720px;
}

.legal-content h2 {
    font-size: 24px;
    margin-top: 2.4em !important;
    margin-bottom: 0.8em !important;
    padding-top: 0;
    scroll-margin-top: 100px;
}

.legal-content h2:first-child {
    margin-top: 0 !important;
}

.legal-content p,
.legal-content ul,
.legal-content ol {
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.75;
}

.legal-content ul li,
.legal-content ol li {
    margin-top: 0.5em;
}

.legal-foot {
    margin-top: 56px !important;
    padding: 24px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 14px;
}

.legal-foot p {
    margin: 0;
    font-size: 14px;
    color: var(--text-3);
}


/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 1024px) {
    .legal-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .legal-toc-wrap {
        position: static;
    }
    .legal-toc {
        background: var(--bg-soft);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 20px;
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .about-mission {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 760px) {
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
        padding: 28px 16px;
    }
    .about-stat {
        border-right: none;
    }
    .about-stat:nth-child(odd) {
        border-right: 1px solid var(--border);
    }
    .values-grid {
        grid-template-columns: 1fr;
    }
    .about-cta {
        padding: 40px 24px;
        border-radius: 20px;
    }
}

@media (max-width: 640px) {
    .contact-form-wrap {
        padding: 28px 20px;
    }
    .form-row-2 {
        grid-template-columns: 1fr;
    }
    .about-mission-visual {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ════════════════════════════════════════
   ZAKAT CALCULATOR
   ════════════════════════════════════════ */

.zakat-hero {
    padding: 56px 0 32px;
}

/* "What is Zakat?" collapsible info card */
.zakat-intro {
    padding-bottom: 8px;
}

.zakat-info-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.zakat-info-card[open] {
    border-color: var(--primary);
    box-shadow: 0 8px 24px -12px rgba(99, 102, 241, 0.25);
}

.zakat-info-card summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.zakat-info-card summary::-webkit-details-marker { display: none; }

.zakat-info-icon { font-size: 22px; }

.zakat-info-title {
    flex: 1;
    font-weight: 800;
    color: var(--text);
    font-size: 15px;
    letter-spacing: -0.01em;
}

.zakat-info-toggle {
    color: var(--text-4);
    transition: transform 0.25s;
    font-size: 14px;
}

.zakat-info-card[open] .zakat-info-toggle {
    transform: rotate(180deg);
}

.zakat-info-body {
    padding: 0 22px 22px;
    color: var(--text-3);
    font-size: 14.5px;
    line-height: 1.7;
}

.zakat-info-body p { margin: 0 0 12px; }

.zakat-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 12px 0;
}

.zakat-info-grid h4 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin: 0 0 10px;
}

.zakat-info-grid ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}

.zakat-info-grid li { margin: 4px 0; }

.zakat-info-foot {
    margin-top: 12px !important;
    font-size: 13px !important;
    background: var(--warm-bg);
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--text-2) !important;
}

/* Main calculator grid */
.zakat-section { padding-top: 24px; }

.zakat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}

/* Card */
.zakat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.zakat-card:focus-within {
    border-color: rgba(99, 102, 241, 0.4);
}

.zakat-card-head {
    padding: 22px 24px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.025), transparent);
}

.zakat-card-debit .zakat-card-head {
    background: linear-gradient(to bottom, rgba(244, 63, 94, 0.04), transparent);
}

.zakat-card-confirm {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(16, 185, 129, 0.04));
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.zakat-card-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.zakat-card-num {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--grad-primary);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.zakat-card-head p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-3);
    line-height: 1.55;
}

.zakat-card-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zakat-card-note {
    font-size: 12.5px;
    color: var(--text-4);
    margin: 4px 0 0 !important;
    line-height: 1.55;
    background: var(--bg-soft);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-glow);
}

.zakat-row {
    display: grid;
    gap: 14px;
}

.zakat-row-2 { grid-template-columns: 1fr 1fr; }
.zakat-row-3 { grid-template-columns: repeat(3, 1fr); }

.muted-label {
    color: var(--text-4);
    font-weight: 500;
    font-size: 12px;
    margin-left: 4px;
}

.hint {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-4);
    font-size: 11px;
    font-weight: 800;
    cursor: help;
    margin-left: 4px;
}

/* Currency-prefixed input */
.input-currency {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    transition: all 0.2s;
}

.input-currency:focus-within {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.input-currency .ic-prefix {
    display: grid;
    place-items: center;
    padding: 0 12px;
    font-weight: 700;
    color: var(--text-4);
    font-size: 14px;
    background: rgba(99, 102, 241, 0.05);
    border-right: 1px solid var(--border);
    min-width: 44px;
}

.input-currency input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    width: 100%;
    min-width: 0;
}

.input-currency input::placeholder {
    color: var(--text-5);
    font-weight: 500;
}

/* Unit-suffixed input (g / tola — used by gold + silver weight) */
.input-unit {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    transition: all 0.2s;
    overflow: hidden;
}

.input-unit:focus-within {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.input-unit input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    width: 100%;
    min-width: 0;
}

.input-unit input::placeholder {
    color: var(--text-5);
    font-weight: 500;
}

.input-unit .iu-suffix {
    display: grid;
    place-items: center;
    padding: 0 16px;
    font-weight: 700;
    color: var(--text-4);
    font-size: 13px;
    background: rgba(99, 102, 241, 0.05);
    border-left: 1px solid var(--border);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    min-width: 52px;
}

/* Sticky summary panel */
.zakat-summary {
    position: sticky;
    top: 90px;
}

.zakat-summary-inner {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.12);
}

.zakat-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    line-height: 1.4;
}

.zakat-status-icon { font-size: 20px; flex-shrink: 0; }

.zakat-status[data-state="below"] {
    background: var(--accent-bg);
    border-color: rgba(16, 185, 129, 0.25);
    color: #065f46;
}

.zakat-status[data-state="pending"] {
    background: var(--warm-bg);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.zakat-status[data-state="due"] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(16, 185, 129, 0.06));
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--primary);
}

.zakat-result {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.zakat-result-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    margin-bottom: 8px;
}

.zakat-result-amount {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    word-break: break-all;
}

/* Nisab progress */
.zakat-progress-wrap { margin-bottom: 18px; }

.zakat-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-4);
    margin-bottom: 6px;
}

.zakat-progress-meta:last-child {
    margin-bottom: 0;
    margin-top: 6px;
}

.zakat-progress-meta strong { color: var(--text-2); font-weight: 800; }

.zakat-progress-bar {
    height: 8px;
    background: var(--bg-soft);
    border-radius: 100px;
    overflow: hidden;
}

.zakat-progress-fill {
    height: 100%;
    background: var(--grad-primary);
    border-radius: 100px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mini breakdown list */
.zakat-mini {
    list-style: none;
    margin: 0 0 18px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.zakat-mini li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--text-3);
}

.zakat-mini li.net {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    color: var(--text);
    font-weight: 700;
}

.zakat-mini strong {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Actions */
.zakat-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 14px;
}

.zakat-actions .btn-primary,
.zakat-actions .btn-secondary {
    padding: 10px 16px;
    font-size: 13.5px;
    border-radius: 10px;
    cursor: pointer;
    justify-content: center;
}

.zakat-summary-note {
    font-size: 12px;
    color: var(--text-4);
    margin: 0;
    line-height: 1.55;
    text-align: center;
}

/* Detailed breakdown table */
.zakat-breakdown-section {
    background: var(--bg-soft);
}

.zakat-breakdown-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 8px 24px;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: var(--shadow-soft);
}

.zakat-breakdown {
    width: 100%;
    border-collapse: collapse;
}

.zakat-breakdown td {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 14.5px;
    color: var(--text-2);
}

.zakat-breakdown td:last-child {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.zakat-breakdown tr:last-child td { border-bottom: none; }

.zakat-breakdown tr.subtotal td {
    background: var(--bg-soft);
    font-weight: 800;
    color: var(--text);
}

.zakat-breakdown tr.negative td {
    color: #b91c1c;
}

.zakat-breakdown tr.total td {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    padding: 18px 4px;
    border-top: 2px solid var(--primary);
}

.zakat-breakdown tr.total td:last-child {
    font-size: 22px;
}

/* Responsive */
@media (max-width: 1024px) {
    .zakat-grid {
        grid-template-columns: 1fr;
    }
    .zakat-summary {
        position: static;
    }
}

@media (max-width: 640px) {
    .zakat-row-2,
    .zakat-row-3 {
        grid-template-columns: 1fr;
    }
    .zakat-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .zakat-card-head,
    .zakat-card-body {
        padding-left: 18px;
        padding-right: 18px;
    }
    .zakat-result-amount { font-size: 30px; }
    .zakat-breakdown-card { padding: 8px 16px; }
    .zakat-breakdown td { font-size: 13.5px; padding: 12px 2px; }
    .zakat-breakdown tr.total td:last-child { font-size: 18px; }
}

/* Print */
@media print {
    .topbar, .nav, footer, .zakat-actions, .zakat-summary-note,
    .zakat-info-card, .faq-section, .breadcrumbs-wrap, .page-hero,
    .zakat-section, .quran-verse-wrap, .share-modal { display: none !important; }
    .zakat-breakdown-section { padding: 0 !important; background: white; }
    body { background: white; }
    .zakat-breakdown-card {
        box-shadow: none;
        border: 1px solid #999;
    }
}


/* ════════════════════════════════════════
   ISLAMIC TOOL — GREEN THEME OVERRIDE
   Scoped to .zakat-page or .islamic-tool on body —
   re-points the primary colour palette to green so
   Islamic tools render in green while other pages
   stay purple.
   ════════════════════════════════════════ */
.zakat-page,
.islamic-tool {
    --primary:        #059669;
    --primary-light:  #10b981;
    --primary-soft:   #34d399;
    --primary-glow:   #6ee7b7;
    --primary-bg:     #d1fae5;
    --grad-primary:   linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

/* Hardcoded purple rgba values inside the calculator CSS — override to green */
.zakat-page .zakat-card:focus-within,
.islamic-tool .zakat-card:focus-within { border-color: rgba(16, 185, 129, 0.4); }

.zakat-page .zakat-card-head,
.islamic-tool .zakat-card-head { background: linear-gradient(to bottom, rgba(16, 185, 129, 0.04), transparent); }

.zakat-page .zakat-card-confirm,
.islamic-tool .zakat-card-confirm {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.04));
    border-color: rgba(16, 185, 129, 0.25);
}

.zakat-page .input-currency .ic-prefix,
.islamic-tool .input-currency .ic-prefix { background: rgba(16, 185, 129, 0.06); }

.zakat-page .input-currency:focus-within,
.islamic-tool .input-currency:focus-within { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12); }

.zakat-page .input-unit .iu-suffix,
.islamic-tool .input-unit .iu-suffix { background: rgba(16, 185, 129, 0.06); }

.zakat-page .input-unit:focus-within,
.islamic-tool .input-unit:focus-within { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12); }

.zakat-page .zakat-summary-inner,
.islamic-tool .zakat-summary-inner { box-shadow: 0 12px 32px -16px rgba(5, 150, 105, 0.18); }

.zakat-page .zakat-status[data-state="due"],
.islamic-tool .zakat-status[data-state="due"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.06));
    border-color: rgba(16, 185, 129, 0.3);
    color: #047857;
}

.zakat-page .zakat-actions .btn-primary,
.islamic-tool .zakat-actions .btn-primary { box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.4); }

.zakat-page .zakat-actions .btn-primary:hover,
.islamic-tool .zakat-actions .btn-primary:hover { box-shadow: 0 12px 24px -6px rgba(16, 185, 129, 0.5); }


/* ════════════════════════════════════════
   QURANIC VERSE CARD
   ════════════════════════════════════════ */
.quran-verse-wrap {
    padding: 12px 0 28px;
}

.quran-verse {
    position: relative;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 50%, #ecfdf5 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 22px;
    padding: 40px 32px 32px;
    margin: 0;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 10px 30px -16px rgba(16, 185, 129, 0.25);
}

/* Decorative corners — Islamic geometric feel */
.quran-verse::before,
.quran-verse::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-image: radial-gradient(circle, rgba(16, 185, 129, 0.12) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.5;
    pointer-events: none;
}
.quran-verse::before { top: -20px; left: -20px; }
.quran-verse::after  { bottom: -20px; right: -20px; }

.quran-verse-deco {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-accent);
    color: white;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.45);
}

.quran-verse-deco svg {
    width: 22px;
    height: 22px;
}

.quran-arabic {
    font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Arabic Typesetting", serif;
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    line-height: 1.9;
    color: var(--text);
    margin: 0 auto 20px;
    max-width: 760px;
    letter-spacing: 0;
    direction: rtl;
}

.quran-translation {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--text-2);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto 14px;
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.quran-ref {
    font-size: 12.5px;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

@media (max-width: 600px) {
    .quran-verse-wrap { padding: 8px 0 18px; }
    .quran-verse {
        padding: 28px 18px 22px;
        border-radius: 18px;
    }
    .quran-verse::before,
    .quran-verse::after {
        width: 50px;
        height: 50px;
    }
    .quran-verse::before { top: -12px; left: -12px; }
    .quran-verse::after  { bottom: -12px; right: -12px; }
    .quran-verse-deco { width: 36px; height: 36px; margin-bottom: 14px; }
    .quran-verse-deco svg { width: 18px; height: 18px; }
    .quran-arabic { line-height: 1.85; margin-bottom: 14px; }
    .quran-translation { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
    .quran-ref { font-size: 11.5px; letter-spacing: 0.1em; }
}


/* ════════════════════════════════════════
   SHARE MODAL
   ════════════════════════════════════════ */
.share-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.share-modal[hidden] { display: none; }

.share-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: shareFade 0.2s ease;
}

.share-modal-card {
    position: relative;
    background: white;
    border-radius: 22px;
    width: 100%;
    max-width: 460px;
    padding: 28px 26px 24px;
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.4);
    animation: sharePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes shareFade  { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes sharePop   { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.share-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.share-modal-close:hover {
    background: var(--bg-soft);
    color: var(--text);
}

.share-modal-head {
    text-align: center;
    margin-bottom: 18px;
}

.share-modal-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.share-modal-head h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 6px;
}

.share-modal-head p {
    font-size: 13.5px;
    color: var(--text-3);
    line-height: 1.55;
    margin: 0;
}

.share-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-4);
    margin-bottom: 6px;
}

.share-modal-text {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-2);
    background: var(--bg-soft);
    resize: vertical;
    outline: none;
    min-height: 130px;
    transition: all 0.2s;
}

.share-modal-text:focus {
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.share-modal-actions {
    margin: 14px 0 4px;
}

.share-copy-btn {
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.4);
}

.share-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(16, 185, 129, 0.5);
}

.share-modal-divider {
    text-align: center;
    margin: 18px 0 14px;
    position: relative;
    color: var(--text-4);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.share-modal-divider::before {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: var(--border);
}

.share-modal-divider span {
    position: relative;
    background: white;
    padding: 0 12px;
}

.share-modal-socials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.share-social-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-2);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s;
}

.share-social-btn svg {
    width: 22px;
    height: 22px;
}

.share-social-btn:hover {
    transform: translateY(-2px);
    border-color: transparent;
    color: white;
}

.share-social-btn.share-wa:hover { background: #25D366; box-shadow: 0 8px 16px -4px rgba(37, 211, 102, 0.4); }
.share-social-btn.share-tw:hover { background: #000;     box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3); }
.share-social-btn.share-fb:hover { background: #1877F2; box-shadow: 0 8px 16px -4px rgba(24, 119, 242, 0.4); }

.share-modal-foot {
    margin: 0;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    font-style: italic;
    color: var(--text-4);
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .share-modal-card {
        padding: 24px 20px 20px;
    }
    .share-modal-socials {
        gap: 6px;
    }
    .share-social-btn {
        font-size: 11px;
    }
}


/* ════════════════════════════════════════
   FASTING CALCULATOR — TIME INPUT + PREVIEW
   ════════════════════════════════════════ */

/* Time input wrapper with sunrise/sunset emoji prefix */
.input-time {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    transition: all 0.2s;
    overflow: hidden;
}

.input-time:focus-within {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.input-time .it-icon {
    display: grid;
    place-items: center;
    padding: 0 14px;
    font-size: 18px;
    background: rgba(16, 185, 129, 0.06);
    border-right: 1px solid var(--border);
    min-width: 50px;
}

.input-time input[type="time"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    width: 100%;
    min-width: 0;
}

/* Inline duration preview + 24h timeline (inside the Today's Fast card) */
.fast-preview {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 16px;
    padding: 20px 22px 22px;
    margin-top: 4px;
}

.fast-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fast-preview-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #047857;
    margin-bottom: 4px;
}

.fast-preview-duration {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.fast-preview-times {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fpt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border-radius: 100px;
    padding: 6px 12px 6px 8px;
    border: 1px solid rgba(16, 185, 129, 0.15);
    font-size: 13px;
}

.fpt-icon { font-size: 16px; }
.fpt-label {
    color: var(--text-4);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fpt-row strong {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding-left: 10px;
}

/* 24-hour timeline */
.fast-timeline {
    margin-top: 4px;
}

.ft-track {
    position: relative;
    height: 10px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 100px;
    overflow: visible;
    margin: 24px 0 6px;
}

.ft-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 100px;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px -1px rgba(16, 185, 129, 0.4);
}

.ft-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    background: white;
    border: 2px solid #10b981;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.5);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    z-index: 2;
}

.ft-hours {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    letter-spacing: 0.04em;
    padding: 0 2px;
}

@media (max-width: 640px) {
    .fast-preview-head {
        flex-direction: column;
    }
    .fast-preview-times {
        width: 100%;
    }
    .fast-preview-duration {
        font-size: 26px;
    }
    .ft-hours { font-size: 10px; }
    .ft-marker { width: 22px; height: 22px; font-size: 11px; }
}


/* ════════════════════════════════════════
   RAMADAN COUNTDOWN
   ════════════════════════════════════════ */

/* Hero with subtle starfield */
.ramadan-hero {
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 40%, transparent 100%);
    position: relative;
    overflow: hidden;
}

.ramadan-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(16, 185, 129, 0.4), transparent 50%),
        radial-gradient(1px 1px at 40% 70%, rgba(16, 185, 129, 0.3), transparent 50%),
        radial-gradient(2px 2px at 60% 20%, rgba(16, 185, 129, 0.3), transparent 50%),
        radial-gradient(1px 1px at 80% 50%, rgba(16, 185, 129, 0.4), transparent 50%),
        radial-gradient(1.5px 1.5px at 10% 80%, rgba(16, 185, 129, 0.3), transparent 50%),
        radial-gradient(1px 1px at 90% 90%, rgba(16, 185, 129, 0.3), transparent 50%);
    z-index: 0;
    animation: starsTwinkle 6s ease-in-out infinite;
}

@keyframes starsTwinkle {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* Countdown card */
.countdown-section {
    padding: 0 var(--pad) 32px;
}

.countdown-card {
    background: white;
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 24px 48px -16px rgba(16, 185, 129, 0.18);
    max-width: 880px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.countdown-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(16, 185, 129, 0.06), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(5, 150, 105, 0.06), transparent 40%);
    pointer-events: none;
}

.countdown-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-bg);
    color: #047857;
    padding: 8px 18px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 28px;
    position: relative;
}

.cd-status-icon { font-size: 18px; }

/* Big digit blocks */
.countdown-digits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 28px;
}

.cd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 18px;
    padding: 18px 18px 14px;
    min-width: 96px;
    box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.18);
}

.cd-num {
    font-size: clamp(40px, 8vw, 64px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.cd-lbl {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-4);
}

.cd-sep {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    color: rgba(16, 185, 129, 0.5);
    line-height: 1;
    align-self: flex-start;
    padding-top: 18px;
}

/* Target date metadata */
.countdown-target {
    margin-bottom: 24px;
    position: relative;
}

.cd-target-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cd-target-label strong {
    color: var(--primary);
    font-weight: 800;
}

.cd-target-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-top: 4px;
}

.cd-target-note {
    font-size: 12px;
    color: var(--text-4);
    margin-top: 6px;
    font-style: italic;
}

/* Year picker */
.countdown-controls {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-soft);
    border-radius: 100px;
    padding: 6px 6px 6px 18px;
    margin-bottom: 20px;
    position: relative;
}

.countdown-controls label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-3);
}

.countdown-controls select {
    border: 1px solid var(--border);
    background: white;
    border-radius: 100px;
    padding: 8px 16px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
    outline: none;
}

.countdown-controls select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Action buttons */
.countdown-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.countdown-actions .btn-primary,
.countdown-actions .btn-secondary {
    cursor: pointer;
    border: 1px solid transparent;
}

.countdown-actions .btn-secondary {
    border-color: var(--border-2);
}


/* Key dates grid */
.keydates-section {
    background: var(--bg);
}

.keydates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.keydate-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 20px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.keydate-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.keydate-card:hover {
    border-color: transparent;
    box-shadow: 0 12px 28px -12px rgba(16, 185, 129, 0.25);
    transform: translateY(-3px);
}

.keydate-card:hover::before {
    transform: scaleX(1);
}

.keydate-emoji {
    font-size: 32px;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 8px rgba(16, 185, 129, 0.15));
}

.keydate-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}

.keydate-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.keydate-desc {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.55;
}

/* Responsive */
@media (max-width: 900px) {
    .keydates-grid { grid-template-columns: repeat(2, 1fr); }
    .countdown-card { padding: 32px 22px; }
    .cd-cell { min-width: 80px; padding: 14px 14px 12px; }
    .cd-sep { padding-top: 12px; }
}

@media (max-width: 520px) {
    .keydates-grid { grid-template-columns: 1fr; }
    .countdown-digits { gap: 4px; }
    .cd-cell { min-width: 64px; padding: 12px 8px 10px; border-radius: 14px; }
    .cd-sep { display: none; }
    .countdown-controls { padding: 4px 4px 4px 14px; }
    .countdown-controls label { font-size: 11.5px; }
    .countdown-controls select { font-size: 12.5px; padding: 7px 12px; }
}


/* ════════════════════════════════════════
   FITRANA CALCULATOR
   ════════════════════════════════════════ */

/* Household list — each row = a person/group with a stepper */
.people-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.people-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    transition: all 0.2s;
}

.people-row:hover {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.04);
}

.people-row-locked {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.2);
}

.people-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.people-emoji {
    font-size: 26px;
    flex-shrink: 0;
}

.people-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.people-meta {
    font-size: 12px;
    color: var(--text-4);
    font-weight: 500;
    margin-top: 2px;
}

.people-count-locked {
    width: 50px;
    height: 38px;
    display: grid;
    place-items: center;
    background: white;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    font-weight: 800;
    font-size: 16px;
    color: #047857;
}

/* Stepper component (- 0 +) */
.stepper {
    display: inline-flex;
    align-items: stretch;
    background: white;
    border: 1px solid var(--border);
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

.stepper button {
    width: 36px;
    height: 38px;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}

.stepper button:hover {
    background: rgba(16, 185, 129, 0.1);
}

.stepper button:active {
    background: rgba(16, 185, 129, 0.2);
}

.stepper input[type="number"] {
    width: 50px;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: transparent;
    text-align: center;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Total row at bottom of household list */
.people-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 6px;
}

.people-total-label {
    font-size: 13px;
    font-weight: 800;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.people-total-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.people-total-value strong {
    color: #047857;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 26px;
}

/* "When to pay" callout */
.when-to-pay {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.wtp-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.wtp-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #047857;
    margin-bottom: 4px;
}

.wtp-text {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

.wtp-text strong {
    color: var(--primary);
    font-weight: 800;
}

/* Responsive */
@media (max-width: 520px) {
    .people-row {
        flex-direction: row;
        align-items: center;
        padding: 12px 14px;
    }
    .people-emoji { font-size: 22px; }
    .people-name  { font-size: 14px; }
    .people-meta  { font-size: 11px; }
    .stepper button { width: 32px; height: 34px; font-size: 16px; }
    .stepper input  { width: 40px; font-size: 14px; }
    .people-total-value { font-size: 18px; }
    .people-total-value strong { font-size: 22px; }
    .when-to-pay { gap: 12px; }
    .wtp-icon { font-size: 26px; }
    .wtp-text { font-size: 13.5px; }
}


/* ════════════════════════════════════════
   FITRANA — FOOD-TYPE SELECTOR
   ════════════════════════════════════════ */
.food-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.food-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 16px 12px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    position: relative;
}

.food-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(16, 185, 129, 0.25);
}

.food-card.active {
    border-color: #10b981;
    background: linear-gradient(180deg, #ecfdf5 0%, white 70%);
    box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.35);
}

/* Check mark on the active card */
.food-card.active::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 2px 6px -1px rgba(16, 185, 129, 0.5);
}

.food-emoji {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.food-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.food-meta {
    font-size: 11.5px;
    color: var(--text-4);
    font-weight: 600;
    font-style: italic;
}

.food-weight {
    font-size: 10.5px;
    color: var(--text-5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.food-rate {
    margin-top: 6px;
    padding: 4px 10px;
    background: var(--bg-soft);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    transition: all 0.2s;
}

.food-card.active .food-rate {
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 2px 6px -2px rgba(16, 185, 129, 0.5);
}

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

@media (max-width: 380px) {
    .food-grid { grid-template-columns: 1fr; }
    .food-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; }
    .food-emoji { font-size: 28px; margin: 0; }
    .food-name, .food-meta, .food-weight, .food-rate { display: inline-block; }
    .food-rate { margin-top: 0; margin-left: auto; }
    .food-weight { display: none; }
}

/* Auto-detected currency hint (shown briefly after timezone-based pick) */
.auto-detect-hint {
    margin-top: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 10px;
    font-size: 12.5px;
    color: #047857;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.5s, transform 0.5s;
}

.auto-detect-hint strong {
    font-weight: 800;
    color: #065f46;
}

.auto-detect-hint.fade {
    opacity: 0;
    transform: translateY(-6px);
}

/* "Showing rates in XXX (Currency Name)" label under the dropdown */
.active-ccy {
    margin-top: 6px;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
}

.active-ccy strong {
    color: #047857;
    font-weight: 800;
}

/* Flash pulse on rate pills + currency input when rates update.
   Uses opacity + transform — both compositor-only properties. */
@keyframes ratePulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    40%  { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.food-rate.flash {
    animation: ratePulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes inputPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.input-currency.flash {
    animation: inputPulse 0.7s ease-out;
}

/* Timezone-mismatch prompt — appears if saved currency ≠ user's timezone region */
.mismatch-hint {
    margin-top: 10px;
    padding: 10px 12px 10px 14px;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    transition: opacity 0.4s, transform 0.4s;
}

.mismatch-hint.fade {
    opacity: 0;
    transform: translateY(-6px);
}

.mh-icon { font-size: 18px; flex-shrink: 0; }

.mh-text {
    flex: 1;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
    min-width: 0;
}

.mh-text strong {
    color: #78350f;
    font-weight: 800;
}

.mh-btn-yes {
    background: var(--grad-primary);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.4);
    transition: transform 0.15s;
}

.mh-btn-yes:hover { transform: translateY(-1px); }

.mh-btn-no {
    background: transparent;
    border: 1px solid rgba(146, 64, 14, 0.25);
    color: #92400e;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.mh-btn-no:hover {
    background: rgba(146, 64, 14, 0.1);
}

/* "Use live exchange rate" toggle */
.fx-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
}

.fx-toggle:hover {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.04);
}

.fx-toggle input[type="checkbox"] {
    /* Visually hidden but accessible — the .fx-toggle-knob is the visual control */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.fx-toggle-knob {
    position: relative;
    width: 36px;
    height: 22px;
    background: var(--border-2);
    border-radius: 100px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background 0.2s;
}

.fx-toggle-knob::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fx-toggle input[type="checkbox"]:checked ~ .fx-toggle-knob {
    background: var(--grad-primary);
}

.fx-toggle input[type="checkbox"]:checked ~ .fx-toggle-knob::after {
    transform: translateX(14px);
}

.fx-toggle input[type="checkbox"]:focus-visible ~ .fx-toggle-knob {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.fx-toggle-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.4;
    min-width: 0;
}

.fx-toggle-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
}

.fx-toggle-text small {
    font-size: 12px;
    color: var(--text-4);
    font-weight: 500;
}

/* FX-mode warning banner — appears only when toggle is on */
.fx-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 12px;
}

.fx-warning[hidden] { display: none; }

.fx-warning-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.4;
}

.fx-warning-text {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.55;
    color: #78350f;
}

.fx-warning-text strong {
    font-weight: 800;
    color: #5b2406;
}

.fx-warning-text em {
    font-style: italic;
    color: #5b2406;
}


/* ════════════════════════════════════════
   QURBANI CALCULATOR
   ════════════════════════════════════════ */

.animal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.animal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    transition: all 0.2s;
}

.animal-row:hover {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.04);
}

.animal-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.animal-emoji {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.animal-name {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.animal-meta {
    font-size: 12px;
    color: var(--text-4);
    font-weight: 500;
    margin-top: 2px;
}

/* Editable per-animal price control (inline currency-prefixed input + meta label) */
.animal-price-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.input-currency-sm {
    display: inline-flex;
    align-items: stretch;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
}

.input-currency-sm:hover {
    border-color: rgba(16, 185, 129, 0.35);
}

.input-currency-sm:focus-within {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.input-currency-sm .ic-prefix-sm {
    background: rgba(16, 185, 129, 0.06);
    color: var(--text-4);
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    border-right: 1px solid var(--border);
    display: grid;
    place-items: center;
    min-width: 32px;
}

.input-currency-sm input[type="number"] {
    width: 90px;
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 10px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 800;
    color: #047857;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.input-currency-sm input::-webkit-outer-spin-button,
.input-currency-sm input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.animal-price-meta {
    font-size: 12px;
    color: var(--text-4);
    font-weight: 500;
}

.animal-price-meta strong {
    color: var(--text-2);
    font-weight: 800;
}

/* Brief pulse when prices auto-fill from currency change */
@keyframes pricePulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    40%  { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.animal-row .input-currency-sm.flash {
    animation: pricePulse 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Additional expenses (qasai, feed, transport, other) ── */
.extras-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.extras-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.2s;
}

.extras-row:hover {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.04);
}

.extras-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.extras-info {
    flex: 1;
    min-width: 0;
}

.extras-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.005em;
}

.extras-meta {
    font-size: 11.5px;
    color: var(--text-4);
    font-weight: 500;
    margin-top: 1px;
}

.extras-row .input-currency-sm {
    flex-shrink: 0;
}

.extras-row .input-currency-sm input[type="number"] {
    width: 100px;
}

/* Date field */
.date-field {
    margin-top: 4px;
}

.date-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 6px;
    display: block;
}

.date-field input[type="date"] {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-soft);
    outline: none;
    transition: all 0.2s;
    width: 100%;
    max-width: 240px;
}

.date-field input[type="date"]:focus {
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

/* Receipt-date line in the sticky summary mini list */
.zakat-mini li.date-line {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
    color: var(--text-4);
    font-size: 12.5px;
}

.zakat-mini li.date-line strong {
    color: var(--text-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
    .extras-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .extras-row .input-currency-sm {
        margin-left: auto;
    }
}

/* Responsive — stack the stepper below the info on small screens */
@media (max-width: 520px) {
    .animal-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }
    .animal-row .stepper {
        align-self: flex-end;
    }
    .animal-emoji { font-size: 30px; }
    .animal-name  { font-size: 14.5px; }
    .animal-meta  { font-size: 11.5px; }
    .animal-price { font-size: 12.5px; }
}


/* ════════════════════════════════════════
   RAMADAN CALENDAR
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   RAMADAN CALENDAR — premium settings card
   ════════════════════════════════════════ */
.cal-settings-card {
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 0% 0%,   rgba(16, 185, 129, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.06) 0%, transparent 38%),
        white;
}

/* The form has two rows of two fields — give them more breathing room
   so labels and inputs don't visually collide with the row below. */
.cal-settings-form .zakat-row {
    gap: 16px;
    margin-bottom: 16px;
}
.cal-settings-form .zakat-row:last-of-type { margin-bottom: 18px; }

/* Each field — slightly tighter label, full-width inputs with crisp borders
   and a green focus ring (overrides the global indigo one for Islamic tools). */
.cal-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-2);
    text-transform: none;
    letter-spacing: -0.005em;
    margin-bottom: 2px;
}

.cal-field input,
.cal-field select {
    border: 1.5px solid var(--border) !important;
    background: white !important;
    font-size: 14.5px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}

.cal-field input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}

.cal-field input:hover:not(:focus),
.cal-field select:hover:not(:focus) {
    border-color: rgba(16, 185, 129, 0.4) !important;
}

.cal-field input:focus,
.cal-field select:focus {
    border-color: #10b981 !important;
    background: white !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14) !important;
}

/* Country input — show a subtle "▾" caret via a background image so users
   immediately see it's a list-backed input, not a plain text box. */
#cal-country {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

.cal-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.cal-actions-row .btn-primary,
.cal-actions-row .btn-secondary {
    cursor: pointer;
    border: none;
    padding: 13px 18px;
    font-size: 14px;
    border-radius: 12px;
    transition: transform 0.15s, box-shadow 0.18s, background 0.18s, border-color 0.18s;
}

.cal-actions-row .btn-primary {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    box-shadow: 0 8px 18px -8px rgba(16, 185, 129, 0.55);
}

.cal-actions-row .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -8px rgba(16, 185, 129, 0.65);
}

.cal-actions-row .btn-secondary {
    border: 1.5px solid var(--border-2);
    background: white;
    color: var(--text-2);
    font-weight: 700;
}

.cal-actions-row .btn-secondary:hover {
    border-color: #10b981;
    color: #047857;
    background: rgba(16, 185, 129, 0.04);
    transform: translateY(-1px);
}

.cal-fetch-btn {
    flex: 1 1 220px;
    min-width: 200px;
    justify-content: center;
    font-weight: 700;
}

.cal-loc-btn,
.cal-reset-btn {
    flex: 0 1 auto;
}

/* Note card just under the form */
.cal-settings-card .zakat-card-note {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(20, 184, 166, 0.04));
    border-left: 3px solid #10b981;
    padding: 12px 14px;
    border-radius: 0 10px 10px 0;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-3);
}
.cal-settings-card .zakat-card-note a {
    color: #047857;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Today's prominent card (when current date is in the loaded month) */
.cal-today-card {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 18px;
    padding: 24px 26px;
    margin-bottom: 20px;
    box-shadow: 0 12px 28px -16px rgba(16, 185, 129, 0.25);
}

.cal-today-card[hidden] { display: none; }

.cal-today-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.cal-today-icon {
    font-size: 40px;
    line-height: 1;
}

.cal-today-day {
    font-size: 22px;
    font-weight: 800;
    color: #047857;
    letter-spacing: -0.02em;
}

.cal-today-date {
    font-size: 13px;
    color: var(--text-3);
    font-weight: 600;
    margin-top: 2px;
}

.cal-today-times {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cal-today-time {
    background: white;
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.ctt-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-4);
    margin-bottom: 6px;
}

.ctt-value {
    font-size: 22px;
    font-weight: 800;
    color: #047857;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Loading state */
.cal-loading {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-soft);
    border: 1px dashed var(--border-2);
    border-radius: 16px;
    margin-bottom: 16px;
}

.cal-loading[hidden] { display: none; }

.cal-loading p {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--text-3);
    font-weight: 600;
}

.cal-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(16, 185, 129, 0.15);
    border-top-color: #10b981;
    border-radius: 50%;
    margin: 0 auto;
    animation: spinnerSpin 0.8s linear infinite;
}

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

/* Error state */
.cal-error {
    text-align: center;
    padding: 50px 20px;
    background: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    margin-bottom: 16px;
}

.cal-error[hidden] { display: none; }

.cal-error-icon { font-size: 40px; margin-bottom: 8px; }

.cal-error h3 {
    font-size: 18px;
    font-weight: 800;
    color: #78350f;
    margin: 0 0 6px;
}

.cal-error p {
    font-size: 14px;
    color: #92400e;
    margin: 0;
    line-height: 1.55;
}

/* Results header */
.cal-results[hidden] { display: none; }

.cal-result-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.cal-result-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.015em;
    margin: 0;
}

.cal-result-sub {
    font-size: 13px;
    color: var(--text-4);
    margin: 4px 0 0;
}

.cal-result-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cal-result-actions .btn-primary,
.cal-result-actions .btn-secondary {
    cursor: pointer;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 10px;
    box-shadow: 0 4px 10px -3px rgba(16, 185, 129, 0.35);
}

.cal-result-actions .btn-secondary {
    border: 1px solid var(--border-2);
    box-shadow: none;
}

/* Calendar table */
.cal-table-wrap {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    overflow-x: auto;
}

.cal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 580px;
}

.cal-table thead th {
    text-align: left;
    padding: 14px 14px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-4);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}

.cal-table tbody td {
    padding: 14px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-2);
    vertical-align: middle;
}

.cal-table tbody tr:last-child td { border-bottom: none; }

.cal-table tbody tr:hover {
    background: rgba(16, 185, 129, 0.04);
}

.cal-day-num {
    font-weight: 800;
    color: #047857;
    font-size: 16px;
    width: 50px;
    text-align: center;
    background: rgba(16, 185, 129, 0.05);
}

.cal-date-main {
    font-weight: 700;
    color: var(--text);
}

.cal-date-weekday {
    font-size: 12px;
    color: var(--text-4);
    margin-top: 2px;
}

.cal-hijri {
    font-weight: 600;
    color: var(--text-3);
    font-size: 13.5px;
}

.cal-time {
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
    white-space: nowrap;
}

.cal-duration {
    font-weight: 700;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* Today's row highlight */
.cal-today-row {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.04));
}

.cal-today-row td {
    color: #047857 !important;
    font-weight: 700;
}

.cal-today-row .cal-day-num {
    background: var(--grad-primary);
    color: white !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}

.cal-today-row .cal-day-num::after {
    content: 'TODAY';
    background: rgba(255, 255, 255, 0.22);
    color: white;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 100px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Responsive — mid (tablet) */
@media (max-width: 720px) {
    .cal-today-card { padding: 18px 18px; }
    .cal-today-head { gap: 12px; margin-bottom: 14px; }
    .cal-today-icon { font-size: 32px; }
    .cal-today-day { font-size: 18px; }
    .cal-today-times { grid-template-columns: 1fr; gap: 8px; }
    .cal-today-time { padding: 12px 14px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .ctt-label { margin-bottom: 0; font-size: 11px; }
    .ctt-value { font-size: 18px; }
    .cal-result-head { flex-direction: column; align-items: stretch; }
    .cal-result-actions {
        justify-content: flex-end;
    }
    .cal-actions-row { flex-direction: column; }
    .cal-fetch-btn { min-width: 0; width: 100%; }
    .cal-actions-row .btn-secondary { width: 100%; justify-content: center; }
}

/* Responsive — small (phone) — convert table to stacked cards */
@media (max-width: 600px) {
    .cal-table-wrap {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
    .cal-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .cal-table thead { display: none; }
    .cal-table tbody { display: block; }
    .cal-table tbody tr {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 6px 14px;
        align-items: center;
        background: white;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 10px;
        box-shadow: var(--shadow-soft);
    }
    .cal-table tbody td {
        display: block;
        padding: 0;
        border: none;
        font-size: 13px;
    }
    /* Day number = column 1, full row span (vertical pill) */
    .cal-table tbody td.cal-day-num {
        grid-column: 1;
        grid-row: 1 / span 5;
        background: rgba(16, 185, 129, 0.08);
        color: #047857;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 800;
        width: auto;
        min-height: 88px;
        align-self: stretch;
    }
    /* Today's row (mobile) — keep gradient on the day pill */
    .cal-today-row .cal-day-num {
        gap: 3px;
    }
    .cal-today-row .cal-day-num::after {
        font-size: 8px;
        padding: 1.5px 5px;
    }
    /* Other cells stack in column 2 */
    .cal-table tbody td:not(.cal-day-num) { grid-column: 2; }
    .cal-table tbody td:nth-of-type(2) { grid-row: 1; }   /* date */
    .cal-table tbody td:nth-of-type(3) { grid-row: 2; }   /* hijri */
    .cal-table tbody td:nth-of-type(4) { grid-row: 3; }   /* sehri */
    .cal-table tbody td:nth-of-type(5) { grid-row: 4; }   /* iftar */
    .cal-table tbody td:nth-of-type(6) { grid-row: 5; }   /* duration */

    /* Inline labels via ::before for scannability */
    .cal-table tbody td.cal-hijri::before,
    .cal-table tbody td.cal-time::before,
    .cal-table tbody td.cal-duration::before {
        display: inline-block;
        margin-right: 6px;
        font-weight: 600;
        color: var(--text-4);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        min-width: 50px;
    }
    .cal-table tbody td.cal-hijri::before { content: '☪ Hijri'; }
    .cal-table tbody td:nth-of-type(4)::before { content: '🌅 Sehri'; }
    .cal-table tbody td:nth-of-type(5)::before { content: '🌇 Iftar'; }
    .cal-table tbody td.cal-duration::before { content: '⏱ Hours'; }

    /* Cleaner date layout in card mode */
    .cal-date-main { display: inline; }
    .cal-date-weekday {
        display: inline;
        margin-left: 6px;
        font-size: 12px;
        color: var(--text-4);
        font-weight: 500;
    }
    .cal-date-weekday::before { content: '· '; }
    .cal-table tbody tr:hover { background: white; } /* no hover swap on mobile */

    /* Today row card — green tint background */
    .cal-today-row {
        background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%) !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
    }

    /* Result actions — keep icons + labels visible (we have room in card mode) */
    .cal-result-actions { gap: 8px; }
    .cal-result-actions .btn-primary,
    .cal-result-actions .btn-secondary {
        flex: 1;
        justify-content: center;
        font-size: 12.5px;
        padding: 9px 8px;
    }
}

/* Print — clean, paper-friendly */
@media print {
    .topbar, .nav, footer, .breadcrumbs-wrap, .quran-verse-wrap,
    .cal-settings-card, .cal-loading, .cal-error, .cal-result-actions,
    .faq-section, .page-hero, .share-modal { display: none !important; }
    body { background: white; }
    .cal-results { padding: 0 !important; }
    .cal-table-wrap { box-shadow: none; border: 1px solid #999; }
    .cal-today-card {
        background: white !important;
        box-shadow: none;
        border: 1px solid #999;
    }
    .cal-today-row { background: #f0fdf4 !important; }
}


/* ════════════════════════════════════════
   GENERATOR TOOLS — VIVID GRADIENT THEME
   Purple → Fuchsia → Rose. Three-stop gradient for
   a premium, gaming-modern feel that's distinct
   from the green Islamic suite.
   ════════════════════════════════════════ */
.generator-tool {
    --primary:        #c026d3;   /* fuchsia-600 — solid accent for buttons/text */
    --primary-light:  #d946ef;   /* fuchsia-500 — bright primary */
    --primary-soft:   #e879f9;   /* fuchsia-400 — softer */
    --primary-glow:   #f0abfc;   /* fuchsia-300 — glow */
    --primary-bg:     #fae8ff;   /* fuchsia-50  — background tint */
    --grad-primary:   linear-gradient(135deg, #a855f7 0%, #d946ef 45%, #f43f5e 100%);
}

/* Override hardcoded green rgbas inside the shared .zakat-card patterns */
.generator-tool .zakat-card:focus-within { border-color: rgba(217, 70, 239, 0.4); }
.generator-tool .zakat-card-head { background: linear-gradient(to bottom, rgba(217, 70, 239, 0.04), transparent); }
.generator-tool .zakat-summary-inner { box-shadow: 0 12px 32px -16px rgba(192, 38, 211, 0.2); }
.generator-tool .zakat-actions .btn-primary { box-shadow: 0 6px 16px -4px rgba(217, 70, 239, 0.4); }
.generator-tool .zakat-actions .btn-primary:hover { box-shadow: 0 12px 24px -6px rgba(217, 70, 239, 0.5); }
.generator-tool .input-currency .ic-prefix { background: rgba(217, 70, 239, 0.06); }
.generator-tool .input-currency:focus-within { box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.12); }


/* ════════════════════════════════════════
   GAMERTAG GENERATOR — STYLE PICKER + RESULTS
   ════════════════════════════════════════ */

.gen-hero {
    padding: 56px 0 32px;
}

.gen-section { padding-top: 24px; }

/* Style cards grid (similar to Fitrana food cards) */
.style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    position: relative;
}

.style-card:hover {
    border-color: rgba(217, 70, 239, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(217, 70, 239, 0.25);
}

.style-card.active {
    border-color: #d946ef;
    background: linear-gradient(180deg, #fae8ff 0%, white 70%);
    box-shadow: 0 10px 24px -8px rgba(168, 85, 247, 0.4),
                0 0 0 1px rgba(217, 70, 239, 0.25);
}

.style-card.active::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 10px -2px rgba(168, 85, 247, 0.5);
}

.style-emoji {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.style-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.style-meta {
    font-size: 11.5px;
    color: var(--text-4);
    font-weight: 600;
}

.style-example {
    margin-top: 6px;
    padding: 3px 10px;
    background: var(--bg-soft);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.style-card.active .style-example {
    background: var(--grad-primary);
    color: white;
}

@media (max-width: 900px) {
    .style-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
    .style-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Generate button — animated gradient that subtly drifts so it feels alive */
.gen-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-top: 4px;
    background-image: linear-gradient(
        110deg,
        #8b5cf6 0%,
        #a855f7 20%,
        #d946ef 45%,
        #ec4899 70%,
        #f43f5e 100%
    );
    background-size: 220% 100%;
    animation: gradientDrift 9s linear infinite;
    box-shadow: 0 8px 22px -6px rgba(168, 85, 247, 0.5);
    transition: transform 0.18s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

.gen-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(217, 70, 239, 0.6);
}

.gen-btn:active {
    transform: translateY(0);
}

/* Subtle moving sheen on top of the gradient (transform-only — compositor friendly) */
.gen-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: translateX(-200%) skewX(-18deg);
    animation: btnSheen 4.5s ease-in-out 1s infinite;
    pointer-events: none;
    will-change: transform;
}

@keyframes gradientDrift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes btnSheen {
    0%       { transform: translateX(-200%) skewX(-18deg); }
    35%, 100% { transform: translateX(370%)  skewX(-18deg); }
}

/* "Generate more" button — same animated gradient, smaller */
.gen-more-btn {
    background-image: linear-gradient(
        110deg,
        #8b5cf6 0%,
        #d946ef 50%,
        #f43f5e 100%
    );
    background-size: 200% 100%;
    animation: gradientDrift 7s linear infinite;
}

/* Results section */
.gen-results-card[hidden] { display: none; }

.gen-results-head {
    background: linear-gradient(to bottom, rgba(244, 63, 94, 0.04), transparent);
}

.gen-results-meta {
    font-size: 13px;
    color: var(--text-4);
    font-weight: 600;
}

.gen-results-meta span:first-child {
    color: #a21caf;
    font-weight: 800;
    text-transform: capitalize;
}

/* Tag grid — generated names */
.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

@keyframes tagSlideIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.tag-card {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
    animation: tagSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.tag-card:hover {
    border-color: #d946ef;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(217, 70, 239, 0.35),
                0 0 0 1px rgba(217, 70, 239, 0.15);
}

.tag-text {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    letter-spacing: -0.01em;
    word-break: break-all;
    min-width: 0;
    transition: color 0.2s;
}

.tag-card:hover .tag-text {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tag-fav {
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    width: 40px;
    height: 100%;
    min-height: 44px;
    cursor: pointer;
    color: var(--text-4);
    display: grid;
    place-items: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.tag-fav svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.tag-fav:hover {
    background: rgba(217, 70, 239, 0.06);
    color: #d946ef;
}

.tag-card.fav .tag-fav {
    color: #d946ef;
    background: rgba(217, 70, 239, 0.08);
}

.tag-card.fav .tag-fav svg {
    transform: scale(1.1);
}

/* Action row below results */
.gen-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.gen-actions-row .btn-primary,
.gen-actions-row .btn-secondary {
    cursor: pointer;
    border: none;
    padding: 10px 16px;
    font-size: 13.5px;
}

.gen-actions-row .btn-secondary {
    border: 1px solid var(--border-2);
}

.gen-more-btn {
    background: var(--grad-primary);
}

/* Favorites */
.gen-favorites-card[hidden] { display: none; }

/* Copy toast — bottom centre, slides up */
.copy-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text);
    color: white;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10000;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s;
    pointer-events: none;
}

.copy-toast[hidden] { display: none; }

.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.copy-toast-icon {
    background: var(--grad-primary);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
}

/* fx-toggle override for rose theme */
.generator-tool .fx-toggle input[type="checkbox"]:checked ~ .fx-toggle-knob {
    background: var(--grad-primary);
}

@media (max-width: 540px) {
    .tag-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .tag-text { font-size: 13.5px; padding: 10px 12px; }
    .gen-btn { padding: 12px 16px; font-size: 15px; }
}


/* ════════════════════════════════════════
   WEIRD TEXT GENERATOR
   ════════════════════════════════════════ */

/* Input card */
.wt-input-wrap {
    position: relative;
}

.wt-input-wrap textarea {
    width: 100%;
    min-height: 100px;
    padding: 16px 56px 16px 18px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--bg-soft);
    font-family: var(--font);
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: all 0.2s;
}

.wt-input-wrap textarea:focus {
    border-color: #d946ef;
    background: white;
    box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.12);
}

.wt-clear {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-4);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.wt-clear:hover {
    border-color: #d946ef;
    color: #d946ef;
    background: var(--primary-bg);
}

.wt-input-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-4);
    font-weight: 600;
}

.wt-input-meta span:first-child {
    color: #a21caf;
    font-variant-numeric: tabular-nums;
}

.wt-tip {
    font-weight: 500;
    font-style: italic;
}

/* Results grid */
.wt-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.wt-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: all 0.2s;
    min-height: 84px;
    overflow: hidden;
    position: relative;
}

.wt-card:hover {
    border-color: #d946ef;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(217, 70, 239, 0.35),
                0 0 0 1px rgba(217, 70, 239, 0.15);
}

.wt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wt-style-name {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
}

.wt-card:hover .wt-style-name {
    color: #a21caf;
}

.wt-copy-icon {
    color: var(--text-5);
    transition: color 0.2s;
}

.wt-card:hover .wt-copy-icon {
    color: #d946ef;
}

.wt-preview {
    font-size: 18px;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
    /* Some Unicode styles can be tall (Zalgo) — clip overflow */
    max-height: 4.5em;
    overflow: hidden;
}

/* Brief flash when card is clicked-to-copy */
@keyframes wtCopiedFlash {
    0%   { background: white; }
    20%  { background: rgba(217, 70, 239, 0.15); }
    100% { background: white; }
}

.wt-card.copied {
    animation: wtCopiedFlash 0.7s ease;
    border-color: #d946ef;
}

@media (max-width: 540px) {
    .wt-input-wrap textarea {
        font-size: 15px;
        padding: 14px 48px 14px 14px;
    }
    .wt-results {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .wt-preview { font-size: 16px; }
}

/* ─── Weird-text category tabs (horizontal scroll) ── */
.wt-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    margin: 0 -4px 12px;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}

.wt-tabs::-webkit-scrollbar { height: 4px; }
.wt-tabs::-webkit-scrollbar-thumb { background: rgba(217, 70, 239, 0.3); border-radius: 100px; }

.wt-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.005em;
}

.wt-tab:hover {
    border-color: rgba(217, 70, 239, 0.5);
    color: #a21caf;
    transform: translateY(-1px);
}

.wt-tab.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(168, 85, 247, 0.45);
}

.wt-tab-em {
    font-size: 14px;
    font-weight: 800;
}

.wt-tab-count {
    background: var(--bg-soft);
    color: var(--text-4);
    font-size: 10.5px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 100px;
    min-width: 22px;
    text-align: center;
}

.wt-tab.active .wt-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ─── Search input ── */
.wt-search-wrap {
    position: relative;
    margin-bottom: 14px;
}

.wt-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--text-4);
    pointer-events: none;
}

.wt-search {
    width: 100%;
    padding: 10px 40px 10px 40px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    background: var(--bg-soft);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    outline: none;
    transition: all 0.2s;
}

.wt-search:focus {
    border-color: #d946ef;
    background: white;
    box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.12);
}

.wt-search::placeholder {
    color: var(--text-5);
    font-weight: 500;
}

/* Inline X to clear the query — appears only when text is present */
.wt-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(217, 70, 239, 0.08);
    color: #a21caf;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.wt-search-clear[hidden] { display: none; }
.wt-search-clear:hover {
    background: rgba(217, 70, 239, 0.18);
    color: #86198f;
    transform: translateY(-50%) scale(1.06);
}

/* Pre-hydration loading state — replaced by JS once cards render */
.oe-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
}
.oe-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(217, 70, 239, 0.18);
    border-top-color: #d946ef;
    border-radius: 50%;
    animation: oeLoadingSpin 0.8s linear infinite;
}
@keyframes oeLoadingSpin {
    to { transform: rotate(360deg); }
}


/* ════════════════════════════════════════
   RANDOM EMOJI GENERATOR
   ════════════════════════════════════════ */

/* Category cards grid */
.emoji-cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.emoji-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font);
}

.emoji-cat-card:hover {
    border-color: rgba(217, 70, 239, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(217, 70, 239, 0.25);
}

.emoji-cat-card.active {
    border-color: #d946ef;
    background: linear-gradient(180deg, #fae8ff 0%, white 70%);
    box-shadow: 0 8px 18px -6px rgba(168, 85, 247, 0.4);
}

.emoji-cat-emoji { font-size: 26px; line-height: 1; }
.emoji-cat-name {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-2);
    text-align: center;
}

.emoji-cat-card.active .emoji-cat-name { color: #a21caf; }

@media (max-width: 720px) { .emoji-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 460px) { .emoji-cat-grid { grid-template-columns: repeat(3, 1fr); } }

/* Quantity pills */
.emoji-qty-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.emoji-qty-pill {
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 8px 18px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
    font-variant-numeric: tabular-nums;
}

.emoji-qty-pill:hover {
    border-color: rgba(217, 70, 239, 0.5);
    color: #a21caf;
}

.emoji-qty-pill.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(168, 85, 247, 0.45);
}

/* Combined emoji string (large, click-to-copy) */
.emoji-combined {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #fae8ff 0%, #fff1f2 100%);
    border: 1.5px solid rgba(217, 70, 239, 0.25);
    border-radius: 16px;
    padding: 24px 20px;
    font-size: 36px;
    font-family: var(--font);
    text-align: center;
    line-height: 1.4;
    cursor: pointer;
    word-break: break-word;
    transition: all 0.2s;
    margin-bottom: 14px;
    min-height: 80px;
    color: var(--text);
}

.emoji-combined:hover {
    border-color: #d946ef;
    box-shadow: 0 12px 28px -10px rgba(217, 70, 239, 0.35);
    transform: translateY(-2px);
}

/* Individual emoji tile grid */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

@keyframes emojiPop {
    from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
    to   { opacity: 1; transform: scale(1)   rotate(0); }
}

.emoji-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 8px;
    cursor: pointer;
    transition: all 0.18s;
    aspect-ratio: 1;
    font-family: var(--font);
    animation: emojiPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.emoji-tile:hover {
    border-color: #d946ef;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 18px -6px rgba(217, 70, 239, 0.4);
    z-index: 1;
}

.emoji-tile.copied {
    background: rgba(217, 70, 239, 0.08);
    border-color: #d946ef;
}

.emoji-char {
    font-size: 30px;
    line-height: 1;
    pointer-events: none;
}

.emoji-fav-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-5);
    font-size: 11px;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: all 0.18s;
    line-height: 1;
}

.emoji-tile:hover .emoji-fav-btn,
.emoji-tile.fav .emoji-fav-btn {
    opacity: 1;
}

.emoji-tile.fav .emoji-fav-btn {
    background: var(--grad-primary);
    color: white;
}

.emoji-fav-btn:hover {
    background: var(--grad-primary);
    color: white;
    transform: scale(1.15);
}

/* Combo grid (aesthetic bundles) */
.combo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.combo-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    font-family: var(--font);
}

.combo-card:hover {
    border-color: #d946ef;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(217, 70, 239, 0.3);
}

.combo-card.copied {
    background: rgba(217, 70, 239, 0.08);
    border-color: #d946ef;
}

.combo-emojis {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 6px;
    word-break: break-word;
}

.combo-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.combo-card:hover .combo-name { color: #a21caf; }

@media (max-width: 540px) {
    .emoji-combined { font-size: 26px; padding: 18px 14px; }
    .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
    .emoji-char { font-size: 24px; }
}

/* ── Multi-select category card additions ─────────── */
.emoji-cat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.emoji-cat-actions {
    display: inline-flex;
    gap: 6px;
    align-self: center;
}

.emoji-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 7px 12px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

.emoji-cat-btn:hover:not(:disabled) {
    border-color: rgba(217, 70, 239, 0.5);
    color: #a21caf;
}

.emoji-cat-btn.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
}

.emoji-cat-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* checkmark badge on each cat card */
.emoji-cat-card { position: relative; }

.emoji-cat-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: transparent;
    font-size: 12px;
    font-weight: 800;
    display: grid;
    place-items: center;
    transition: all 0.2s;
    line-height: 1;
}

.emoji-cat-card.active .emoji-cat-check {
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 4px 10px -3px rgba(168, 85, 247, 0.55);
}

/* ── Quantity row with custom input ───────────────── */
.emoji-qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.emoji-qty-custom-wrap {
    position: relative;
}

.emoji-qty-custom {
    width: 96px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 8px 14px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    transition: all 0.18s;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.emoji-qty-custom::-webkit-outer-spin-button,
.emoji-qty-custom::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.emoji-qty-custom:focus {
    outline: none;
    border-color: #d946ef;
    box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.12);
}

.emoji-qty-custom::placeholder {
    color: var(--text-5);
    font-weight: 600;
}

/* ── Output format pills ───────────────────────────── */
.emoji-fmt-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fmt-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 8px 14px;
    border-radius: 14px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
    line-height: 1.2;
}

.fmt-pill span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-5);
    letter-spacing: 0.02em;
}

.fmt-pill:hover {
    border-color: rgba(217, 70, 239, 0.45);
    color: #a21caf;
}

.fmt-pill.active {
    background: linear-gradient(180deg, #fae8ff 0%, white 80%);
    border-color: #d946ef;
    color: #a21caf;
    box-shadow: 0 6px 14px -6px rgba(168, 85, 247, 0.35);
}

.fmt-pill.active span { color: #c026d3; }

/* ── Action row (generate + surprise) ──────────────── */
.emoji-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.surprise-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.surprise-btn svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.surprise-btn:hover svg {
    transform: rotate(180deg);
}

/* ── Live char counter under combined output ───────── */
.emoji-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--text-3);
    font-weight: 600;
}

.emoji-counter:empty { display: none; }

.ec-stat strong {
    color: var(--text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ec-dot { color: var(--text-5); }

.ec-bar {
    flex: 1 1 80px;
    min-width: 80px;
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.ec-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #d946ef, #f43f5e);
    border-radius: 100px;
    transition: width 0.3s ease;
}

.ec-bar.over .ec-bar-fill {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.ec-fit {
    font-size: 11.5px;
    font-weight: 800;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ec-bar.over + .ec-fit { color: #dc2626; }

/* ── Combo tabs + search ───────────────────────────── */
.combo-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.combo-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 7px 13px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
}

.combo-tab small {
    background: var(--bg-soft);
    color: var(--text-3);
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 700;
    margin-left: 2px;
}

.combo-tab:hover {
    border-color: rgba(217, 70, 239, 0.5);
    color: #a21caf;
}

.combo-tab.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(168, 85, 247, 0.45);
}

.combo-tab.active small {
    background: rgba(255,255,255,0.25);
    color: white;
}

.combo-search-wrap {
    position: relative;
    margin-bottom: 14px;
}

.combo-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--text-5);
    pointer-events: none;
}

.combo-search {
    width: 100%;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 11px 14px 11px 40px;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    transition: all 0.18s;
}

.combo-search:focus {
    outline: none;
    border-color: #d946ef;
    box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.12);
}

.combo-search:focus ~ .combo-search-icon,
.combo-search-wrap:focus-within .combo-search-icon {
    color: #d946ef;
}

.combo-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-3);
    background: var(--bg-soft);
    border-radius: 14px;
}

.combo-empty-emoji {
    display: block;
    font-size: 36px;
    margin-bottom: 8px;
}

.combo-empty p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* ── Recent copies grid (slightly smaller) ─────────── */
.recent-grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    margin-bottom: 12px;
}

@media (max-width: 540px) {
    .emoji-cat-head { flex-direction: column; }
    .emoji-cat-actions { align-self: flex-start; }
    .fmt-pill { flex: 1 1 calc(50% - 3px); }
    .combo-tab { font-size: 11.5px; padding: 6px 10px; }
}


/* ════════════════════════════════════════
   TIKTOK USERNAME GENERATOR
   ════════════════════════════════════════ */

/* Vibe picker — same shape as .style-grid, 4-up */
.vibe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.vibe-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    position: relative;
}

.vibe-card:hover {
    border-color: rgba(217, 70, 239, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(217, 70, 239, 0.25);
}

.vibe-card.active {
    border-color: #d946ef;
    background: linear-gradient(180deg, #fae8ff 0%, white 70%);
    box-shadow: 0 10px 24px -8px rgba(168, 85, 247, 0.4),
                0 0 0 1px rgba(217, 70, 239, 0.25);
}

.vibe-card.active::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 10px -2px rgba(168, 85, 247, 0.5);
}

.vibe-emoji {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.vibe-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.vibe-meta {
    font-size: 11.5px;
    color: var(--text-4);
    font-weight: 600;
}

.vibe-example {
    margin-top: 6px;
    padding: 3px 10px;
    background: var(--bg-soft);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.vibe-card.active .vibe-example {
    background: var(--grad-primary);
    color: white;
}

@media (max-width: 1100px) { .vibe-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .vibe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .vibe-grid { grid-template-columns: 1fr; } }

/* Toggle row inside Customize card */
.tt-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin-bottom: 4px;
}

@media (max-width: 640px) {
    .tt-toggle-row { grid-template-columns: 1fr; }
}

.tt-mono {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    background: var(--bg-soft);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.92em;
    color: #a21caf;
}

.tt-arrow {
    color: #a21caf;
    font-weight: 800;
    margin: 0 1px;
}

/* Username card grid */
.tt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tt-card {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
    animation: tagSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.tt-card:hover {
    border-color: #d946ef;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(217, 70, 239, 0.35),
                0 0 0 1px rgba(217, 70, 239, 0.15);
}

.tt-text {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    letter-spacing: -0.01em;
    word-break: break-all;
    min-width: 0;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.tt-at {
    color: var(--text-5);
    font-weight: 600;
    margin-right: 1px;
}

.tt-card:hover .tt-text {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tt-card:hover .tt-at {
    -webkit-text-fill-color: transparent;
}

.tt-card-actions {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

.tt-check,
.tt-fav {
    width: 38px;
    min-height: 44px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-4);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.tt-check:hover {
    background: rgba(168, 85, 247, 0.06);
    color: #a855f7;
}

.tt-check:hover svg {
    transform: translate(2px, -2px);
}

.tt-check svg {
    transition: transform 0.2s;
}

.tt-fav svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.tt-fav:hover {
    background: rgba(217, 70, 239, 0.06);
    color: #d946ef;
}

.tt-card.fav .tt-fav {
    color: #d946ef;
    background: rgba(217, 70, 239, 0.08);
}

.tt-card.fav .tt-fav svg {
    transform: scale(1.1);
}


/* ════════════════════════════════════════
   INSTAGRAM BIO GENERATOR
   ════════════════════════════════════════ */

/* Length / quantity pills (reuse fmt-pill spacing) */
.ig-length-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ig-length-pill {
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 8px 16px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ig-length-pill small {
    color: var(--text-5);
    font-weight: 600;
    font-size: 11.5px;
}

.ig-length-pill:hover {
    border-color: rgba(217, 70, 239, 0.45);
    color: #a21caf;
}

.ig-length-pill.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(168, 85, 247, 0.45);
}

.ig-length-pill.active small {
    color: rgba(255, 255, 255, 0.85);
}

/* IG-style profile preview card */
.ig-preview-card[hidden] { display: none; }

.ig-preview {
    max-width: 520px;
    margin: 0 auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 12px 28px -16px rgba(168, 85, 247, 0.25);
    position: relative;
    overflow: hidden;
}

.ig-preview::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f9ce34, #ee2a7b, #6228d7);
    border-radius: 18px 18px 0 0;
}

.ig-preview-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 14px;
}

.ig-preview-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(from 0deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
    padding: 3px;
    display: grid;
    place-items: center;
}

.ig-preview-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #fae8ff, #fef3c7);
    display: grid;
    place-items: center;
    color: #a21caf;
    font-size: 28px;
    font-weight: 700;
}

.ig-preview-avatar-inner::after {
    content: '👤';
    font-size: 36px;
}

.ig-preview-stats {
    flex: 1;
    display: flex;
    justify-content: space-around;
    gap: 12px;
}

.ig-preview-stats > div {
    text-align: center;
    line-height: 1.2;
}

.ig-preview-stats strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #262626;
}

.ig-preview-stats span {
    font-size: 13px;
    color: #737373;
}

.ig-preview-body {
    margin-bottom: 16px;
}

.ig-preview-name {
    font-size: 15px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 2px;
}

.ig-preview-handle {
    font-size: 13px;
    color: #737373;
    margin-bottom: 8px;
}

.ig-preview-bio {
    font-size: 14px;
    line-height: 1.45;
    color: #262626;
    white-space: pre-line;
    word-break: break-word;
}

.ig-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: #00376b;
    font-weight: 600;
}

.ig-preview-link-icon {
    transform: rotate(-45deg);
}

.ig-preview-actions {
    display: flex;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #efefef;
}

.ig-preview-btn {
    flex: 1;
    background: #efefef;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #262626;
    cursor: not-allowed;
    font-family: inherit;
}

.ig-preview-btn.primary {
    background: #efefef;
}

.ig-preview-btn.icon {
    flex: 0 0 38px;
    font-size: 16px;
}

@media (max-width: 540px) {
    .ig-preview { padding: 18px; }
    .ig-preview-header { gap: 16px; }
    .ig-preview-avatar { width: 70px; height: 70px; }
    .ig-preview-stats { gap: 6px; }
    .ig-preview-stats strong { font-size: 15px; }
    .ig-preview-stats span { font-size: 12px; }
}

/* Bio results grid */
.ig-bio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.ig-bio-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.2s;
    animation: tagSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ig-bio-card:hover {
    border-color: rgba(217, 70, 239, 0.5);
    box-shadow: 0 10px 24px -10px rgba(217, 70, 239, 0.3);
    transform: translateY(-2px);
}

.ig-bio-card.fav {
    border-color: rgba(217, 70, 239, 0.4);
    background: linear-gradient(180deg, #fef9ff 0%, white 100%);
}

.ig-bio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ig-bio-card-vibe {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a21caf;
    background: #fae8ff;
    padding: 3px 10px;
    border-radius: 100px;
}

.ig-bio-fav {
    background: transparent;
    border: none;
    color: var(--text-4);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.ig-bio-fav:hover {
    background: rgba(217, 70, 239, 0.08);
    color: #d946ef;
}

.ig-bio-card.fav .ig-bio-fav {
    color: #d946ef;
}

.ig-bio-fav svg { width: 16px; height: 16px; }

/* Editable line buttons */
.ig-bio-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 8px;
}

.ig-bio-lines.frozen .ig-bio-line {
    cursor: default;
    pointer-events: none;
}

.ig-bio-lines.frozen .ig-bio-line-refresh {
    display: none;
}

.ig-bio-line {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 10px;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}

.ig-bio-line:hover {
    background: white;
    border-color: rgba(217, 70, 239, 0.35);
}

.ig-bio-line-text {
    flex: 1;
    min-width: 0;
}

.ig-bio-line-refresh {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    color: var(--text-4);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.18s, color 0.18s;
}

.ig-bio-line:hover .ig-bio-line-refresh {
    opacity: 1;
    color: #d946ef;
}

/* Char counter inside bio card */
.ig-bio-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 12px;
    color: var(--text-3);
    font-weight: 600;
    flex-wrap: wrap;
}

.ig-bio-counter .ec-stat strong {
    color: var(--text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ig-bio-counter .ec-bar {
    flex: 1 1 60px;
    min-width: 60px;
    height: 5px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    overflow: hidden;
}

.ig-bio-counter .ec-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #d946ef, #f43f5e);
    border-radius: 100px;
    transition: width 0.3s ease;
}

.ig-bio-counter .ec-bar.over .ec-bar-fill {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.ig-bio-counter .ec-fit {
    font-size: 11px;
    font-weight: 800;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ig-bio-counter .ec-bar.over ~ .ec-fit { color: #dc2626; }

/* Card actions */
.ig-bio-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ig-bio-card-actions .btn-secondary {
    flex: 1 1 auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 10px;
}

@media (max-width: 540px) {
    .ig-bio-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════
   OLD ENGLISH TEXT GENERATOR
   - Reuses .wt-card / .wt-results / .wt-search
     and adds parchment-styled input + decorations
   ════════════════════════════════════════ */

.oe-input-card {
    position: relative;
}

.oe-input-wrap {
    position: relative;
    background: linear-gradient(180deg, #fdf6e3 0%, #f5ecd1 100%);
    border: 1.5px solid #c9b27a;
    border-radius: 14px;
    padding: 24px 48px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 6px rgba(139, 105, 50, 0.15),
        0 4px 14px -8px rgba(139, 105, 50, 0.3);
}

.oe-input-wrap textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #3d2e0f;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    resize: vertical;
    min-height: 70px;
    text-align: center;
}

.oe-input-wrap textarea:focus {
    outline: none;
}

.oe-input-wrap textarea::placeholder {
    color: rgba(61, 46, 15, 0.4);
    font-style: italic;
}

.oe-flourish {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #b08833;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.oe-flourish-l { left: 14px; }
.oe-flourish-r { right: 14px; }

/* Clear button — adapt for parchment context */
.oe-input-wrap .wt-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(176, 136, 51, 0.12);
    border: 1px solid rgba(176, 136, 51, 0.35);
    color: #8b6932;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.18s;
}

.oe-input-wrap .wt-clear:hover {
    background: rgba(176, 136, 51, 0.25);
    color: #6e5022;
}

/* Card / output for medieval styles (extends .wt-card) */
.oe-card .wt-card-head {
    flex-wrap: wrap;
    gap: 6px 10px;
}

.oe-style-hint {
    font-size: 11px;
    color: var(--text-5);
    font-weight: 600;
    flex: 1 1 100%;
    line-height: 1.3;
    letter-spacing: 0;
}

.oe-fav {
    background: transparent;
    border: none;
    color: var(--text-4);
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.oe-fav:hover {
    background: rgba(217, 70, 239, 0.08);
    color: #d946ef;
}

.oe-fav svg {
    width: 14px;
    height: 14px;
}

.oe-card.fav .oe-fav {
    color: #d946ef;
}

/* Output line — large styled text + click-to-copy */
.oe-output {
    width: 100%;
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 22px;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    word-break: break-word;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.oe-output:hover {
    background: white;
    border-color: #d946ef;
    border-style: solid;
}

.oe-output-text {
    flex: 1;
    min-width: 0;
}

.oe-output-text:empty::before {
    content: '— type something —';
    color: var(--text-5);
    font-style: italic;
    font-size: 14px;
}

.wt-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    color: var(--text-3);
    background: var(--bg-soft);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 540px) {
    .oe-input-wrap { padding: 22px 40px; }
    .oe-flourish { font-size: 18px; }
    .oe-output { font-size: 18px; }
}


/* ════════════════════════════════════════
   HEALTH TOOLS — palette override (teal/cyan)
   Scoped to .health-tool on body, mirrors how
   .islamic-tool re-points the primary palette.
   ════════════════════════════════════════ */

.health-tool {
    --primary:        #0e7490;
    --primary-light:  #0891b2;
    --primary-soft:   #06b6d4;
    --primary-glow:   #67e8f9;
    --primary-bg:     #cffafe;
    --grad-primary:   linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
}

.health-tool .zakat-card:focus-within { border-color: rgba(8, 145, 178, 0.4); }
.health-tool .zakat-card-head { background: linear-gradient(to bottom, rgba(8, 145, 178, 0.04), transparent); }
.health-tool .zakat-card-confirm {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(34, 211, 238, 0.04));
    border-color: rgba(8, 145, 178, 0.25);
}
.health-tool .input-currency .ic-prefix,
.health-tool .input-unit .iu-suffix { background: rgba(8, 145, 178, 0.06); }
.health-tool .input-currency:focus-within,
.health-tool .input-unit:focus-within { box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12); }
.health-tool .zakat-summary-inner { box-shadow: 0 12px 32px -16px rgba(8, 145, 178, 0.18); }


/* ════════════════════════════════════════
   WATER FASTING CALCULATOR
   ════════════════════════════════════════ */

/* ── Protocol picker ────────────────────────────── */
.wf-proto-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.wf-proto-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

.wf-proto-card:hover {
    border-color: rgba(8, 145, 178, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(8, 145, 178, 0.25);
}

.wf-proto-card.active {
    border-color: #0891b2;
    background: linear-gradient(180deg, #cffafe 0%, white 70%);
    box-shadow: 0 8px 18px -6px rgba(8, 145, 178, 0.4),
                0 0 0 1px rgba(8, 145, 178, 0.25);
}

.wf-proto-card.active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
}

.wf-proto-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1;
    margin-bottom: 2px;
}

.wf-proto-meta {
    font-size: 11.5px;
    color: var(--text-4);
    font-weight: 600;
    line-height: 1.2;
}

.wf-proto-tag {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-soft);
    color: var(--text-3);
    padding: 2px 7px;
    border-radius: 100px;
}

.wf-proto-card.active .wf-proto-tag {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}

@media (max-width: 1100px) { .wf-proto-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .wf-proto-grid { grid-template-columns: repeat(2, 1fr); } }

.wf-custom-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

/* ── Quick start buttons ───────────────────────── */
.wf-quick-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wf-quick {
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

.wf-quick:hover {
    border-color: rgba(8, 145, 178, 0.5);
    color: #0e7490;
    background: rgba(8, 145, 178, 0.05);
}

/* Primary "Start fast now" — visually weighted differently from the relative-time chips */
.wf-quick-primary {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(8, 145, 178, 0.5);
}
.wf-quick-primary:hover {
    background: linear-gradient(135deg, #0e7490, #0891b2);
    color: white;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -6px rgba(8, 145, 178, 0.6);
}

/* Inline-hint warn state for future-dated meal times */
.muted-label.warn { color: #b45309; font-weight: 700; }

/* ── Custom-duration callout (shown when "Custom" protocol is picked) ──
   Visually attached to the protocol grid above with a small arrow so it's
   obvious which card it belongs to — no more stranded floating row. */
.wf-custom-row {
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.06), rgba(34, 211, 238, 0.04));
    border: 1.5px dashed rgba(8, 145, 178, 0.35);
    border-radius: 14px;
    padding: 16px 18px;
    position: relative;
}
.wf-custom-row[hidden] { display: none; }

.wf-custom-row-arrow {
    position: absolute;
    top: -8px;
    left: 32px;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.06), rgba(34, 211, 238, 0.04));
    border-left: 1.5px dashed rgba(8, 145, 178, 0.35);
    border-top:  1.5px dashed rgba(8, 145, 178, 0.35);
    transform: rotate(45deg);
}

.wf-custom-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #0e7490;
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.wf-custom-row-icon { font-size: 16px; line-height: 1; }

.wf-custom-input-wrap {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1.5px solid rgba(8, 145, 178, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.wf-custom-input-wrap:focus-within {
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.wf-custom-input-wrap input {
    flex: 1;
    border: none;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: transparent;
    outline: none;
}
.wf-custom-input-wrap input::-webkit-outer-spin-button,
.wf-custom-input-wrap input::-webkit-inner-spin-button { margin: 0; }
.wf-custom-input-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: rgba(8, 145, 178, 0.08);
    border-left: 1px solid rgba(8, 145, 178, 0.18);
    color: #0e7490;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wf-custom-row-help {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}

/* ── "or pick an exact time" divider ───────────────── */
.wf-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--text-4);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.wf-divider::before,
.wf-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Exact-time picker sub-card ────────────────────── */
.wf-exact-time {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.18s, background 0.18s;
}
.wf-exact-time:focus-within {
    border-color: rgba(8, 145, 178, 0.4);
    background: white;
}
.wf-exact-time-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 10px;
}
.wf-exact-time-icon { font-size: 16px; line-height: 1; }
.wf-exact-time-input {
    width: 100%;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.wf-exact-time-input:focus {
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.wf-exact-time-help {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}
.wf-exact-time-help.warn { color: #b45309; font-weight: 700; }

/* ════════════════════════════════════════
   CUSTOM CONFIRM MODAL
   Replaces window.confirm() — matches the fasting-tool palette and the rest
   of the site's design system (rounded corners, soft shadows, cyan gradient
   for the destructive primary).
   ════════════════════════════════════════ */
.wf-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
}
.wf-modal[hidden] { display: none; }

.wf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: wfModalFadeIn 0.18s ease-out;
}

.wf-modal-card {
    position: relative;
    background: white;
    border-radius: 18px;
    box-shadow:
        0 30px 80px -20px rgba(15, 23, 42, 0.4),
        0 10px 30px -10px rgba(15, 23, 42, 0.2);
    padding: 28px 28px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: wfModalPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wf-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.15), rgba(34, 211, 238, 0.10));
    color: #0891b2;
    font-size: 26px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.18);
}

.wf-modal-title {
    margin: 0 0 8px;
    font-family: var(--font);
    font-size: 19px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.015em;
}

.wf-modal-body {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-3);
}

.wf-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.wf-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 10px 22px;
    border-radius: 100px;
    border: 1.5px solid transparent;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.wf-modal-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.35);
}

.wf-modal-btn.ghost {
    background: white;
    color: var(--text-2);
    border-color: var(--border);
}
.wf-modal-btn.ghost:hover {
    border-color: #94a3b8;
    background: var(--bg-soft);
    color: var(--text);
}

.wf-modal-btn.danger {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: white;
    box-shadow: 0 8px 18px -6px rgba(8, 145, 178, 0.55);
}
.wf-modal-btn.danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -6px rgba(8, 145, 178, 0.7);
}

@keyframes wfModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wfModalPop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Lock body scroll while modal is open */
body.wf-modal-open { overflow: hidden; }

/* ── kg/lb unit toggle inside input-unit ──────── */
.wf-unit-toggle {
    display: inline-flex;
    background: rgba(8, 145, 178, 0.06);
    padding: 0;
    gap: 0;
    border-left: 1px solid var(--border);
}

.wf-unit-btn {
    background: transparent;
    border: none;
    padding: 0 12px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-3);
    cursor: pointer;
    transition: all 0.18s;
    height: 100%;
}

.wf-unit-btn.active {
    background: var(--grad-primary);
    color: white;
}

.wf-unit-btn:not(.active):hover { color: #0e7490; }

/* ── Status pill at top of progress card ──────── */
.wf-progress-card {
    text-align: center;
    padding-top: 18px;
}

.wf-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(8, 145, 178, 0.08);
    color: #0e7490;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.wf-status-pill.done {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(8, 145, 178, 0.08));
    color: #16a34a;
}
/* Idle: no fast started — soft amber tint, dot stops pulsing */
.wf-status-pill.idle {
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
}
.wf-status-pill.idle .wf-pulse {
    background: #94a3b8;
    box-shadow: none;
    animation: none;
}
.wf-status-pill.done .wf-pulse {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
    animation: none;
}

.wf-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #06b6d4;
    box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.5);
    animation: wfPulse 1.5s ease-out infinite;
}

/* Idle progress card — desaturate the ring + center text so the active state is visually distinct */
.wf-progress-card.idle .wf-ring-pct,
.wf-progress-card.idle .wf-ring-elapsed { color: var(--text-4); }
.wf-progress-card.idle .wf-ring-fill   { stroke: var(--border); }

/* Complete state — green ring */
.wf-progress-card.complete .wf-ring-fill {
    stroke: url(#wf-ring-gradient);
    filter: hue-rotate(150deg) saturate(0.8);
}

/* Action buttons row inside progress card */
.wf-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
.wf-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 100px;
    border: 1.5px solid transparent;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}
.wf-action-btn.primary {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: white;
    box-shadow: 0 6px 14px -4px rgba(8, 145, 178, 0.5);
}
.wf-action-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -6px rgba(8, 145, 178, 0.65);
}
.wf-action-btn.ghost {
    background: white;
    color: var(--text-2);
    border-color: var(--border);
}
.wf-action-btn.ghost:hover {
    border-color: #94a3b8;
    color: var(--text);
    background: var(--bg-soft);
}

@keyframes wfPulse {
    0%   { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.6); transform: scale(1); }
    70%  { box-shadow: 0 0 0 10px rgba(8, 145, 178, 0); transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0); transform: scale(1); }
}

/* ── Progress ring ──────────────────────────────── */
.wf-ring-wrap {
    position: relative;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 1;
    margin: 8px auto 18px;
}

.wf-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wf-ring-bg {
    fill: none;
    stroke: rgba(8, 145, 178, 0.12);
    stroke-width: 14;
}

.wf-ring-fill {
    fill: none;
    stroke: #06b6d4;            /* fallback */
    stroke: url(#wf-ring-gradient);
    stroke-width: 14;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wf-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wf-ring-pct {
    font-size: 44px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
}

.wf-ring-elapsed {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.wf-ring-label {
    font-size: 11px;
    color: var(--text-5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Stats row under ring ───────────────────────── */
.wf-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.wf-stat {
    text-align: center;
    padding: 4px;
}

.wf-stat-label {
    font-size: 10.5px;
    color: var(--text-5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.wf-stat-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

@media (max-width: 540px) {
    .wf-stats-row { grid-template-columns: 1fr; gap: 6px; }
    .wf-stat { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); }
    .wf-stat:last-child { border-bottom: none; }
    .wf-stat-label { margin-bottom: 0; }
}

/* ── Current phase card ─────────────────────────── */
.wf-phase-card {
    margin-top: 14px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(34, 211, 238, 0.03) 100%);
    border: 1px solid rgba(8, 145, 178, 0.18);
}

.wf-phase-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.wf-phase-emoji {
    font-size: 38px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(8, 145, 178, 0.18));
}

.wf-phase-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-5);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.wf-phase-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}

.wf-phase-desc {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.wf-phase-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px dashed rgba(8, 145, 178, 0.35);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 600;
}

.wf-phase-next strong {
    color: #0e7490;
    font-weight: 800;
}

.wf-phase-next-icon {
    color: #0891b2;
    font-weight: 800;
}

/* ── Phase timeline ─────────────────────────────── */
.wf-timeline-card {
    margin-top: 14px;
    padding: 18px;
}

.wf-timeline-head h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 2px 0;
    color: var(--text);
}

.wf-timeline-head p {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-4);
}

.wf-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.wf-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: var(--border);
    border-radius: 2px;
}

.wf-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
}

.wf-timeline-marker {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--border);
    display: grid;
    place-items: center;
    font-size: 18px;
    z-index: 1;
    transition: all 0.3s;
}

.wf-timeline-item.done .wf-timeline-marker {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.05));
    border-color: rgba(34, 197, 94, 0.45);
}

.wf-timeline-item.current .wf-timeline-marker {
    background: var(--grad-primary);
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(8, 145, 178, 0.45),
                0 0 0 4px rgba(8, 145, 178, 0.12);
    animation: wfPulse 1.6s ease-out infinite;
}

.wf-timeline-item.current .wf-timeline-marker .wf-timeline-emoji {
    filter: brightness(1.2) drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

.wf-timeline-emoji {
    line-height: 1;
}

.wf-timeline-body {
    flex: 1;
    padding-top: 8px;
}

.wf-timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.wf-timeline-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
}

.wf-timeline-item.done .wf-timeline-name { color: #16a34a; }
.wf-timeline-item.current .wf-timeline-name { color: #0e7490; }
.wf-timeline-item.beyond .wf-timeline-name { color: var(--text-4); }

.wf-timeline-range {
    font-size: 11.5px;
    color: var(--text-5);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wf-timeline-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 100px;
}

.wf-timeline-tag.done {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.wf-timeline-tag.now {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}

.wf-timeline-tag.upcoming {
    background: var(--bg-soft);
    color: var(--text-4);
}

/* ── Estimates card ─────────────────────────────── */
.wf-est-card {
    margin-top: 14px;
    padding: 18px;
}

.wf-est-head h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 2px 0;
    color: var(--text);
}

.wf-est-head p {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-4);
}

.wf-est-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wf-est-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.wf-est-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    display: grid;
    place-items: center;
    font-size: 18px;
    border: 1px solid var(--border);
}

.wf-est-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-5);
    font-weight: 800;
}

.wf-est-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin-top: 2px;
}

.wf-est-value small {
    font-size: 12px;
    color: var(--text-4);
    font-weight: 700;
}

.wf-est-note {
    font-size: 11.5px;
    color: var(--text-5);
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.4;
}

/* ── Disclaimer footer ──────────────────────────── */
.wf-disclaimer {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(239, 68, 68, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.55;
}

.wf-disclaimer strong {
    color: #b45309;
    font-weight: 800;
}

/* ── Optional eyebrow on card heading ──────────── */
.zakat-card-optional {
    font-size: 13px;
    color: var(--text-5);
    font-weight: 600;
    margin-left: 6px;
}


/* ════════════════════════════════════════
   BLOG — REDESIGNED v2
   ════════════════════════════════════════ */

/* ── Categories spotlight (4-up gradient cards) ── */
.blog-cats-section {
    padding-top: 32px;
    padding-bottom: 0;
}

.blog-cats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.blog-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cat-grad, linear-gradient(135deg, #eef2ff 0%, #ffffff 100%));
    border: 1px solid var(--cat-border, var(--border));
    border-radius: 22px;
    padding: 26px 22px 22px;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s;
    overflow: hidden;
    min-height: 280px;
    isolation: isolate;
}

/* Decorative dotted-grid pattern in the background */
.blog-cat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--cat-dot, rgba(99, 102, 241, 0.18)) 1.2px, transparent 1.2px);
    background-size: 18px 18px;
    background-position: -1px -1px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, transparent 70%);
    mask-image: radial-gradient(circle at 100% 0%, black 0%, transparent 70%);
}

/* Soft corner glow that intensifies on hover */
.blog-cat-card::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -25%;
    width: 220px;
    height: 220px;
    background: var(--cat-glow, radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%));
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s;
    opacity: 0.85;
    filter: blur(8px);
}

.blog-cat-card > * { position: relative; z-index: 1; }

.blog-cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -18px var(--cat-shadow, rgba(99, 102, 241, 0.45));
    border-color: var(--cat-color, var(--primary));
}

.blog-cat-card:hover::after { opacity: 1; }

.blog-cat-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 10px;
}

.blog-cat-emoji {
    font-size: 44px;
    line-height: 1;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: white;
    border-radius: 18px;
    box-shadow: 0 12px 28px -10px var(--cat-shadow, rgba(99, 102, 241, 0.35)),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    flex-shrink: 0;
}

.blog-cat-card:hover .blog-cat-emoji {
    transform: scale(1.08) rotate(-8deg);
    box-shadow: 0 18px 36px -10px var(--cat-shadow, rgba(99, 102, 241, 0.55));
}

.blog-cat-count {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cat-color, var(--primary));
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 5px 11px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.08);
    align-self: flex-start;
    white-space: nowrap;
}

.blog-cat-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.blog-cat-desc {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 16px;
    flex: 1;
}

.blog-cat-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 16px;
}

.blog-cat-sub-chip {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 5px 11px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.blog-cat-card:hover .blog-cat-sub-chip {
    background: white;
    color: var(--cat-color, var(--primary));
    transform: translateY(-1px);
}

.blog-cat-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--cat-color, var(--primary));
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--cat-border-soft, rgba(99, 102, 241, 0.25));
    letter-spacing: 0.01em;
}

.blog-cat-arrow svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 16px;
    height: 16px;
}

.blog-cat-card:hover .blog-cat-arrow svg {
    transform: translateX(6px);
}

/* Per-category palettes — gradient backgrounds, soft tints */
.blog-cat-primary {
    --cat-color: #6366f1;
    --cat-shadow: rgba(99, 102, 241, 0.45);
    --cat-grad: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ffffff 100%);
    --cat-border: rgba(99, 102, 241, 0.18);
    --cat-border-soft: rgba(99, 102, 241, 0.3);
    --cat-dot: rgba(99, 102, 241, 0.22);
    --cat-glow: radial-gradient(circle, rgba(129, 140, 248, 0.45) 0%, transparent 70%);
}
.blog-cat-rose {
    --cat-color: #d946ef;
    --cat-shadow: rgba(217, 70, 239, 0.45);
    --cat-grad: linear-gradient(135deg, #fdf4ff 0%, #fff1f2 50%, #ffffff 100%);
    --cat-border: rgba(217, 70, 239, 0.18);
    --cat-border-soft: rgba(217, 70, 239, 0.3);
    --cat-dot: rgba(217, 70, 239, 0.22);
    --cat-glow: radial-gradient(circle, rgba(244, 114, 182, 0.45) 0%, transparent 70%);
}
.blog-cat-accent {
    --cat-color: #0891b2;
    --cat-shadow: rgba(8, 145, 178, 0.45);
    --cat-grad: linear-gradient(135deg, #ecfeff 0%, #cffafe 35%, #ffffff 100%);
    --cat-border: rgba(8, 145, 178, 0.18);
    --cat-border-soft: rgba(8, 145, 178, 0.3);
    --cat-dot: rgba(8, 145, 178, 0.22);
    --cat-glow: radial-gradient(circle, rgba(34, 211, 238, 0.45) 0%, transparent 70%);
}
.blog-cat-warm {
    --cat-color: #d97706;
    --cat-shadow: rgba(245, 158, 11, 0.45);
    --cat-grad: linear-gradient(135deg, #fffbeb 0%, #fef3c7 35%, #ffffff 100%);
    --cat-border: rgba(245, 158, 11, 0.22);
    --cat-border-soft: rgba(245, 158, 11, 0.3);
    --cat-dot: rgba(245, 158, 11, 0.28);
    --cat-glow: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%);
}

@media (max-width: 980px) { .blog-cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .blog-cats-grid { grid-template-columns: 1fr; } }

/* ── Two-column blog layout (main + sidebar) ── */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

.blog-layout-main { min-width: 0; }

.blog-layout-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1100px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-layout-side { position: static; flex-direction: column; }
}

/* ── Side cards (Trending, Topics, Newsletter) ── */
.blog-side-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    position: relative;
    transition: box-shadow 0.3s;
}

.blog-side-card:hover {
    box-shadow: 0 14px 32px -16px rgba(99, 102, 241, 0.18);
}

.blog-side-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}

.blog-side-icon {
    font-size: 22px;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(217, 70, 239, 0.06));
    border-radius: 10px;
    flex-shrink: 0;
}

.blog-side-head h3 {
    font-size: 14.5px;
    font-weight: 800;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* Trending list */
.blog-trend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    counter-reset: trend;
}

.blog-trend-item {
    padding: 0;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s;
}

.blog-trend-item:not(:last-child) {
    border-bottom-color: var(--border);
}

.blog-trend-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 4px;
    border-radius: 10px;
    text-decoration: none;
    transition: padding 0.2s;
    position: relative;
}

.blog-trend-link:hover {
    padding-left: 8px;
}

.blog-trend-rank {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text-4);
    font-size: 14px;
    font-weight: 800;
    display: grid;
    place-items: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Top 3 get gradient ranks */
.blog-trend-item:nth-child(1) .blog-trend-rank {
    background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
    color: white;
    box-shadow: 0 6px 14px -4px rgba(244, 63, 94, 0.45);
}
.blog-trend-item:nth-child(2) .blog-trend-rank {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.45);
}
.blog-trend-item:nth-child(3) .blog-trend-rank {
    background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
    color: white;
    box-shadow: 0 6px 14px -4px rgba(6, 182, 212, 0.45);
}

.blog-trend-link:hover .blog-trend-rank {
    transform: scale(1.1) rotate(-4deg);
}

.blog-trend-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.blog-trend-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    padding: 2px 8px;
    border-radius: 100px;
}

.blog-trend-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.blog-trend-link:hover .blog-trend-title {
    color: var(--primary);
}

.blog-trend-meta {
    font-size: 11px;
    color: var(--text-5);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Side topics list */
.blog-side-cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.blog-side-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-2);
    transition: all 0.2s;
    border: 1px solid transparent;
}

.blog-side-cat:hover {
    background: var(--bg-soft);
    border-color: var(--border);
    transform: translateX(2px);
}

.blog-side-cat.active {
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 8px 18px -6px rgba(99, 102, 241, 0.45);
}

.blog-side-cat-emoji {
    font-size: 18px;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--bg-soft);
    border-radius: 10px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.blog-side-cat:hover .blog-side-cat-emoji {
    background: white;
}

.blog-side-cat.active .blog-side-cat-emoji {
    background: rgba(255, 255, 255, 0.2);
}

.blog-side-cat-name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 700;
}

.blog-side-cat-count {
    font-size: 11px;
    font-weight: 800;
    background: var(--bg-soft);
    color: var(--text-4);
    padding: 3px 9px;
    border-radius: 100px;
    min-width: 26px;
    text-align: center;
}

.blog-side-cat:hover .blog-side-cat-count {
    background: white;
    color: var(--primary);
}

.blog-side-cat.active .blog-side-cat-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Side newsletter — gradient hero treatment */
.blog-side-newsletter {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #ffffff 100%);
    border-color: rgba(99, 102, 241, 0.18);
    overflow: hidden;
}

.blog-side-newsletter::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.blog-side-newsletter > * { position: relative; }

.blog-side-newsletter .blog-side-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(217, 70, 239, 0.12));
}

.blog-side-newsletter p {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0 0 14px;
    font-weight: 500;
}

.blog-side-newsletter form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-side-newsletter input {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text);
    width: 100%;
    transition: all 0.2s;
}

.blog-side-newsletter input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.blog-side-newsletter button {
    background: var(--grad-primary);
    border: none;
    color: white;
    border-radius: 12px;
    padding: 11px 14px;
    font-family: var(--font);
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.4);
}

.blog-side-newsletter button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.55);
}

/* ── Upgraded blog cards (subcategory chip + author row) ── */
.blog-thumb {
    position: relative;
}

.blog-thumb-chip {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 100px;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    letter-spacing: 0.02em;
    z-index: 3;
    transition: transform 0.3s;
}

.blog-card:hover .blog-thumb-chip {
    transform: translateY(-2px);
}

.blog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    gap: 10px;
}

.blog-card-author {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
}

.blog-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    font-size: 10.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.4),
                0 0 0 2px white,
                0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* Match card variant for the avatar shadow tint */
.blog-card:has(.blog-thumb-2) .blog-card-avatar {
    background: var(--grad-accent);
    box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.4),
                0 0 0 2px white,
                0 0 0 3px rgba(16, 185, 129, 0.18);
}
.blog-card:has(.blog-thumb-3) .blog-card-avatar {
    background: var(--grad-warm);
    box-shadow: 0 4px 10px -2px rgba(245, 158, 11, 0.4),
                0 0 0 2px white,
                0 0 0 3px rgba(245, 158, 11, 0.18);
}

.blog-card-author-name {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Make the readmore pill feel right inside the foot row */
.blog-card-foot .blog-readmore {
    margin-top: 0;
    align-self: center;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12.5px;
}


/* ════════════════════════════════════════
   POST PAGE — REDESIGNED v2
   ════════════════════════════════════════ */

/* ── Reading progress bar (sticky at top) ── */
.post-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.04);
    z-index: 60;
    pointer-events: none;
}

.post-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--grad-primary);
    border-radius: 0 100px 100px 0;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
    transition: width 0.08s ease-out;
}

/* ── Sidebar — auto TOC ── */
.sidebar-toc-card[hidden] { display: none; }

.sidebar-h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-h4-emoji,
.sidebar-h4 svg {
    color: var(--primary);
    flex-shrink: 0;
}

.sidebar-toc {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-toc a {
    display: block;
    padding: 8px 12px;
    border-left: 2px solid var(--border);
    margin-left: 0;
    color: var(--text-3);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    transition: all 0.18s;
}

.sidebar-toc a:hover {
    color: var(--primary);
    border-left-color: var(--primary-light, var(--primary));
    background: var(--bg-soft);
}

.sidebar-toc a.toc-sub {
    padding-left: 28px;
    font-size: 12.5px;
}

.sidebar-toc a.active {
    color: var(--primary);
    font-weight: 700;
    border-left-color: var(--primary);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), transparent);
}

/* ── Sidebar — "More from this category" list ── */
.sidebar-more-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-more-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.18s;
}

.sidebar-more-link:hover {
    background: var(--bg-soft);
}

.sidebar-more-emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.sidebar-more-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sidebar-more-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-more-link:hover .sidebar-more-title {
    color: var(--primary);
}

.sidebar-more-meta {
    font-size: 11px;
    color: var(--text-5);
    font-weight: 600;
}

/* ── Sticky vertical share rail (left side, desktop only) ── */
.post-share-rail {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 8px;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.12);
    z-index: 40;
    animation: railFadeIn 0.4s ease-out;
}

.post-share-rail[hidden] {
    display: none;
}

@keyframes railFadeIn {
    from { opacity: 0; transform: translate(-12px, -50%); }
    to   { opacity: 1; transform: translate(0,    -50%); }
}

.post-share-rail-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.post-share-rail-btn:hover {
    transform: scale(1.1);
    color: white;
}

.post-share-rail-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.post-share-rail-btn.tw:hover { background: #000; }
.post-share-rail-btn.fb:hover { background: #1877F2; }
.post-share-rail-btn.li:hover { background: #0A66C2; }
.post-share-rail-btn.wa:hover { background: #25D366; }
.post-share-rail-btn.copy:hover { background: var(--primary); }

.post-share-rail-btn.copy.copied {
    background: #16a34a;
    color: white;
}

.post-share-rail-btn.copy.copied svg { transform: scale(0.85); }

/* Hide rail on small screens — keep the inline share row in the article */
@media (max-width: 1280px) {
    .post-share-rail { display: none !important; }
}

/* ── Prev / Next post navigation ── */
.post-pn-section {
    padding: 32px 0 24px;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.post-pn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.post-pn-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    text-decoration: none;
    transition: all 0.22s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-pn-card.next {
    text-align: right;
    align-items: flex-end;
}

.post-pn-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -14px rgba(99, 102, 241, 0.45);
}

.post-pn-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-5);
}

.post-pn-card:hover .post-pn-eyebrow { color: var(--primary); }

.post-pn-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.post-pn-cat {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-bg, rgba(99, 102, 241, 0.08));
    padding: 3px 10px;
    border-radius: 100px;
}

.post-pn-time {
    font-size: 11.5px;
    color: var(--text-5);
    font-weight: 700;
}

.post-pn-title {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-pn-card:hover .post-pn-title {
    color: var(--primary);
}

@media (max-width: 720px) {
    .post-pn-grid { grid-template-columns: 1fr; }
    .post-pn-card.next { text-align: left; align-items: flex-start; }
}


/* ════════════════════════════════════════════════════
   MAGAZINE LAYOUT (blog index v3)
   Single, focused flow — no fighting sidebars,
   no duplicate navigation.
   ════════════════════════════════════════════════════ */

.mag-page {
    background: var(--bg);
}

/* ── Compact page header (title + search in one bar) ───── */
.mag-header {
    background: linear-gradient(180deg, #f8f5ff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border);
    padding: 56px 0 36px;
    position: relative;
    overflow: hidden;
}

.mag-header::before,
.mag-header::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}

.mag-header::before {
    top: -100px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
}

.mag-header::after {
    top: -80px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.18) 0%, transparent 70%);
}

.mag-header-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
}

@media (max-width: 880px) {
    .mag-header { padding: 40px 0 28px; }
    .mag-header-inner { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}

.mag-header-left { min-width: 0; }

.mag-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.mag-h1 {
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--text);
    margin: 0 0 12px;
}

.mag-h1-light {
    color: var(--text-3);
    font-weight: 700;
}

.mag-h1-grad {
    background: linear-gradient(135deg, #6366f1 0%, #d946ef 50%, #f43f5e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mag-sub {
    font-size: 16px;
    color: var(--text-3);
    line-height: 1.55;
    max-width: 620px;
    margin: 0;
    font-weight: 500;
}

/* ── Inline search ──────────────────────── */
.mag-search {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 4px 4px 4px 16px;
    gap: 8px;
    width: 360px;
    max-width: 100%;
    transition: all 0.2s;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.08);
}

.mag-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 8px 22px -8px rgba(99, 102, 241, 0.25);
}

.mag-search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-4);
    flex-shrink: 0;
}

.mag-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text);
    padding: 10px 0;
    min-width: 0;
}

.mag-search input:focus { outline: none; }

.mag-search button {
    background: var(--grad-primary);
    border: none;
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.45);
    display: grid;
    place-items: center;
}

.mag-search button:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 10px 22px -6px rgba(99, 102, 241, 0.6);
}

/* ── Category pills nav ─────────────────── */
.mag-nav {
    background: white;
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 20;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.92);
}

.mag-nav-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mag-nav-inner::-webkit-scrollbar { display: none; }

.mag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.mag-pill > span:not(.mag-pill-emoji) {
    font-size: 11px;
    font-weight: 800;
    background: var(--bg-soft);
    color: var(--text-4);
    padding: 2px 7px;
    border-radius: 100px;
    transition: all 0.2s;
}

.mag-pill-emoji {
    font-size: 15px;
    line-height: 1;
}

.mag-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.mag-pill.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.5);
}

.mag-pill.active > span:not(.mag-pill-emoji) {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Subcategory pills */
.mag-subnav {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}

.mag-subnav .container {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mag-sub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.mag-sub-pill > span {
    font-size: 10.5px;
    background: var(--bg-soft);
    padding: 1px 7px;
    border-radius: 100px;
    color: var(--text-5);
}

.mag-sub-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.mag-sub-pill.active {
    background: var(--primary);
    color: white;
    border-color: transparent;
}

.mag-sub-pill.active > span {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.mag-sub-pill[data-empty="true"] { opacity: 0.55; }

/* ════════════════════════════════════════════════════
   MAGAZINE HERO — 1 lead + 3 side stories
   ════════════════════════════════════════════════════ */

.mag-hero-section {
    padding-top: 36px;
    padding-bottom: 8px;
}

.mag-hero-spread {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .mag-hero-spread { grid-template-columns: 1fr; }
}

/* LEAD card */
.mag-hero-lead {
    display: grid;
    grid-template-rows: 1fr auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s, border-color 0.35s;
    position: relative;
    isolation: isolate;
    min-height: 460px;
}

.mag-hero-lead:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 28px 56px -22px var(--mag-shadow, rgba(99, 102, 241, 0.5));
}

.mag-hero-thumb {
    position: relative;
    background: var(--mag-grad, var(--grad-primary));
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 280px;
}

.mag-hero-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.55;
    pointer-events: none;
}

.mag-hero-thumb::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -25%;
    width: 80%;
    height: 110%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(20px);
}

.mag-hero-emoji {
    font-size: 160px;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.22));
    position: relative;
    z-index: 2;
    animation: magHeroFloat 7s ease-in-out infinite;
}

.mag-hero-lead:hover .mag-hero-emoji {
    animation-play-state: paused;
    transform: scale(1.08) rotate(-6deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes magHeroFloat {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-10px) rotate(2deg); }
}

.mag-featured-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
    color: white;
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 8px 22px -6px rgba(244, 63, 94, 0.55),
                0 0 0 3px rgba(255, 255, 255, 0.25);
}

.mag-hero-body {
    padding: 28px 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mag-hero-title {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
    transition: color 0.22s;
}

.mag-hero-lead:hover .mag-hero-title { color: var(--primary); }

.mag-hero-excerpt {
    font-size: 14.5px;
    color: var(--text-3);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mag-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

.mag-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.4),
                0 0 0 3px white,
                0 0 0 4px rgba(99, 102, 241, 0.15);
}

.mag-byline-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.mag-byline-text strong {
    font-size: 13px;
    color: var(--text);
    font-weight: 800;
}

.mag-byline-text time {
    font-size: 11.5px;
    color: var(--text-5);
    font-weight: 600;
}

.mag-readmore {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 100px;
    transition: all 0.2s;
}

.mag-hero-lead:hover .mag-readmore {
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 8px 18px -6px rgba(99, 102, 241, 0.5);
}

/* SIDE column (3 stacked horizontal mini cards) */
.mag-hero-side {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
}

.mag-side-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    min-height: 0;
}

.mag-side-card:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 14px 30px -14px var(--mag-shadow, rgba(99, 102, 241, 0.45));
}

.mag-side-thumb {
    position: relative;
    background: var(--mag-grad, var(--grad-primary));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.mag-side-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
    background-size: 14px 14px;
    opacity: 0.5;
    pointer-events: none;
}

.mag-side-emoji {
    font-size: 56px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mag-side-card:hover .mag-side-emoji {
    transform: scale(1.12) rotate(-6deg);
}

.mag-side-body {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.mag-side-title {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.32;
    color: var(--text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.22s;
}

.mag-side-card:hover .mag-side-title { color: var(--primary); }

@media (max-width: 540px) {
    .mag-side-card { grid-template-columns: 96px 1fr; }
    .mag-side-emoji { font-size: 44px; }
}

/* Per-variant gradients on hero+side cards */
.mag-thumb-1 { --mag-grad: var(--grad-primary); --mag-shadow: rgba(99, 102, 241, 0.5); }
.mag-thumb-2 { --mag-grad: var(--grad-accent);  --mag-shadow: rgba(16, 185, 129, 0.45); }
.mag-thumb-3 { --mag-grad: var(--grad-warm);    --mag-shadow: rgba(245, 158, 11, 0.45); }

/* Shared meta row */
.mag-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-4);
    flex-wrap: wrap;
}

.mag-cat {
    color: var(--primary);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mag-thumb-2 ~ * .mag-cat,
.mag-side-card.mag-thumb-2 .mag-cat,
.mag-mini-card.mag-thumb-2 .mag-cat,
.mag-hero-lead.mag-thumb-2 .mag-cat { color: var(--accent); }

.mag-thumb-3 ~ * .mag-cat,
.mag-side-card.mag-thumb-3 .mag-cat,
.mag-mini-card.mag-thumb-3 .mag-cat,
.mag-hero-lead.mag-thumb-3 .mag-cat { color: #d97706; }

.mag-sub-tag {
    color: var(--text-3);
    font-weight: 700;
}

.mag-sep {
    color: var(--text-5);
    font-weight: 400;
}

/* ════════════════════════════════════════════════════
   GENERIC SECTION (Latest, category blocks, grids)
   ════════════════════════════════════════════════════ */

.mag-section {
    padding: 48px 0 16px;
}

.mag-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.mag-section-head h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0;
    line-height: 1.15;
}

.mag-section-head h2 small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-4);
    letter-spacing: 0;
    margin-top: 4px;
}

.mag-section-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

.mag-see-all {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 100px;
    transition: all 0.22s;
    background: rgba(99, 102, 241, 0.08);
    flex-shrink: 0;
}

.mag-see-all:hover {
    background: var(--grad-primary);
    color: white;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.45);
}

.mag-section-head-toolbar { align-items: center; }

.mag-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.mag-sort label {
    color: var(--text-4);
    font-weight: 700;
}

.mag-sort select {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 7px 32px 7px 14px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ── "Latest" 4-up strip ──────────────────────── */
.mag-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1000px) { .mag-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .mag-strip { grid-template-columns: 1fr; } }

.mag-mini-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.mag-mini-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 16px 32px -16px var(--mag-shadow, rgba(99, 102, 241, 0.4));
}

.mag-mini-thumb {
    position: relative;
    background: var(--mag-grad, var(--grad-primary));
    height: 130px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.mag-mini-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.2px);
    background-size: 14px 14px;
    opacity: 0.5;
    pointer-events: none;
}

.mag-mini-emoji {
    font-size: 60px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mag-mini-card:hover .mag-mini-emoji { transform: scale(1.15) rotate(-6deg); }

.mag-mini-chip {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text);
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 100px;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

.mag-mini-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mag-mini-title {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.32;
    color: var(--text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.22s;
}

.mag-mini-card:hover .mag-mini-title { color: var(--primary); }

/* ── Category sections (one per cat on home view) ─────── */
.mag-cats {
    padding: 24px 0 32px;
}

.mag-cat-block + .mag-cat-block {
    margin-top: 56px;
}

.mag-cat-block-emoji {
    font-size: 32px;
    line-height: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.mag-cat-emoji-primary { background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
.mag-cat-emoji-rose    { background: linear-gradient(135deg, #fdf4ff, #fff1f2); }
.mag-cat-emoji-accent  { background: linear-gradient(135deg, #ecfeff, #cffafe); }
.mag-cat-emoji-warm    { background: linear-gradient(135deg, #fffbeb, #fef3c7); }

.mag-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 980px) { .mag-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mag-cat-grid { grid-template-columns: 1fr; } }

/* ── Empty state (search/no-match) ─────────────────────── */
.mag-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-soft);
    border-radius: 18px;
    border: 1px dashed var(--border);
}

.mag-empty-emoji {
    font-size: 56px;
    margin-bottom: 12px;
    line-height: 1;
}

.mag-empty h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
}

.mag-empty p {
    font-size: 15px;
    color: var(--text-3);
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto 24px;
}

/* ════════════════════════════════════════════════════
   NEWSLETTER STRIP (single row, hero-feel)
   ════════════════════════════════════════════════════ */

.mag-newsletter {
    margin-top: 48px;
    padding: 56px 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(217, 70, 239, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, #1f1b3d 0%, #2a1c4d 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.mag-newsletter-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
    align-items: center;
    position: relative;
}

@media (max-width: 880px) {
    .mag-newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
}

.mag-newsletter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mag-newsletter h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 12px;
    color: white;
}

.mag-newsletter p {
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    margin: 0;
    max-width: 460px;
}

.mag-newsletter-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 5px 5px 5px 20px;
    gap: 10px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: all 0.22s;
}

.mag-newsletter-form:focus-within {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
}

.mag-newsletter-form input {
    flex: 1;
    border: none;
    background: transparent;
    color: white;
    font-family: var(--font);
    font-size: 15px;
    padding: 12px 0;
    min-width: 0;
}

.mag-newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.55); }

.mag-newsletter-form input:focus { outline: none; }

.mag-newsletter-form button {
    background: white;
    color: #1f1b3d;
    border: none;
    border-radius: 100px;
    padding: 11px 22px;
    font-family: var(--font);
    font-weight: 800;
    font-size: 14.5px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.mag-newsletter-form button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px -6px rgba(255, 255, 255, 0.4);
}


/* ═══════════════════════════════════════════════════════════════
   BLOG v4 — Classic 2-column (Latest grid + Popular sidebar)
   `.bp-*` namespace = "blog page", separate from older v1/v2/v3.
   ═══════════════════════════════════════════════════════════════ */

.bp-page {
    background: var(--bg);
}

/* ─── PAGE HEADER (compact, with corner glows) ────────────── */
.bp-header {
    background: linear-gradient(180deg, #f8f5ff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border);
    padding: 56px 0 36px;
    position: relative;
    overflow: hidden;
}

.bp-header::before,
.bp-header::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}

.bp-header::before {
    top: -100px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
}

.bp-header::after {
    top: -80px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.18) 0%, transparent 70%);
}

.bp-header-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
}

@media (max-width: 880px) {
    .bp-header { padding: 40px 0 28px; }
    .bp-header-inner { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}

.bp-header-left { min-width: 0; }

.bp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.bp-h1 {
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--text);
    margin: 0 0 12px;
}

.bp-h1-light { color: var(--text-3); font-weight: 700; }

.bp-h1-grad {
    background: linear-gradient(135deg, #6366f1 0%, #d946ef 50%, #f43f5e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bp-sub {
    font-size: 16px;
    color: var(--text-3);
    line-height: 1.55;
    max-width: 620px;
    margin: 0;
    font-weight: 500;
}

/* Inline search (pill) */
.bp-search {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 4px 4px 4px 16px;
    gap: 8px;
    width: 360px;
    max-width: 100%;
    transition: all 0.2s;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.08);
}

.bp-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 8px 22px -8px rgba(99, 102, 241, 0.25);
}

.bp-search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-4);
    flex-shrink: 0;
}

.bp-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text);
    padding: 10px 0;
    min-width: 0;
}

.bp-search input:focus { outline: none; }

.bp-search button {
    background: var(--grad-primary);
    border: none;
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.45);
    display: grid;
    place-items: center;
}

.bp-search button:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 10px 22px -6px rgba(99, 102, 241, 0.6);
}

/* ─── CATEGORY NAV (sticky pill row) ──────────────────────── */
.bp-nav {
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 20;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.92);
}

.bp-nav-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bp-nav-inner::-webkit-scrollbar { display: none; }

.bp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.bp-pill > span:not(.bp-pill-emoji) {
    font-size: 11px;
    font-weight: 800;
    background: var(--bg-soft);
    color: var(--text-4);
    padding: 2px 7px;
    border-radius: 100px;
    transition: all 0.2s;
}

.bp-pill-emoji { font-size: 15px; line-height: 1; }

.bp-pill:hover { border-color: var(--primary); color: var(--primary); }

.bp-pill.active {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.5);
}

.bp-pill.active > span:not(.bp-pill-emoji) {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Sub pills */
.bp-subnav {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}

.bp-subnav .container {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bp-sub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.bp-sub-pill > span {
    font-size: 10.5px;
    background: var(--bg-soft);
    padding: 1px 7px;
    border-radius: 100px;
    color: var(--text-5);
}

.bp-sub-pill:hover { border-color: var(--primary); color: var(--primary); }

.bp-sub-pill.active {
    background: var(--primary);
    color: white;
    border-color: transparent;
}

.bp-sub-pill.active > span {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.bp-sub-pill[data-empty="true"] { opacity: 0.55; }

/* ─── TWO-COLUMN LAYOUT ───────────────────────────────────── */
.bp-main {
    padding-top: 40px;
    padding-bottom: 56px;
}

.bp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
    align-items: start;
}

@media (max-width: 1100px) {
    .bp-layout { grid-template-columns: 1fr; }
}

.bp-col-main { min-width: 0; }

.bp-col-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 1100px) {
    .bp-col-side { position: static; }
}

/* ─── SECTION HEAD (Latest Posts | View All Posts →) ──────── */
.bp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border);
    position: relative;
    flex-wrap: wrap;
}

/* Underline accent on the section heading */
.bp-section-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 2px;
    background: var(--grad-primary);
    border-radius: 100px;
}

.bp-section-h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.bp-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.2s;
}

.bp-view-all:hover { gap: 10px; }

/* Sort select (replaces View All when filtering) */
.bp-sort select {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 7px 32px 7px 14px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ─── MAIN GRID (2-col image cards) ───────────────────────── */
.bp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 720px) { .bp-grid { grid-template-columns: 1fr; } }

/* ─── IMAGE CARD ──────────────────────────────────────────── */
.bp-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s, border-color 0.28s;
    display: flex;
    flex-direction: column;
}

.bp-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 18px 40px -18px rgba(99, 102, 241, 0.4);
}

.bp-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.bp-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-soft);
}

.bp-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-card:hover .bp-card-thumb img {
    transform: scale(1.05);
}

/* Fallback when no image — gradient + emoji block */
.bp-thumb-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--grad-primary);
    position: relative;
}

.bp-thumb-1 .bp-thumb-fallback { background: var(--grad-primary); }
.bp-thumb-2 .bp-thumb-fallback { background: var(--grad-accent); }
.bp-thumb-3 .bp-thumb-fallback { background: var(--grad-warm); }

.bp-thumb-fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.4px);
    background-size: 20px 20px;
    opacity: 0.55;
    pointer-events: none;
}

.bp-thumb-emoji {
    font-size: 84px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bp-card:hover .bp-thumb-emoji {
    transform: scale(1.08) rotate(-5deg);
}

/* Red category tag overlay (top-left) */
.bp-cat-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #ef4444;
    color: white;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.55);
}

/* ─── Card body ───────────────────────────────────────────── */
.bp-card-body {
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bp-card-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.32;
    color: var(--text);
    margin: 0 0 10px;
    transition: color 0.22s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bp-card:hover .bp-card-title { color: var(--primary); }

.bp-card-excerpt {
    font-size: 13.5px;
    color: var(--text-3);
    line-height: 1.6;
    margin: 0 0 14px;
    flex: 1;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row (author · date · 💬N · 👁N) */
.bp-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-4);
    font-weight: 600;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    margin-top: auto;
}

.bp-meta-author {
    color: var(--primary);
    font-weight: 800;
}

.bp-meta-sep { color: var(--text-5); }

.bp-meta-date { color: var(--text-3); font-weight: 600; }

.bp-meta-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-4);
    font-weight: 700;
    margin-left: auto;
}

.bp-meta-icon + .bp-meta-icon { margin-left: 6px; }

.bp-meta-icon svg { color: var(--text-5); }

/* ─── EMPTY STATE ─────────────────────────────────────────── */
.bp-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-soft);
    border-radius: 18px;
    border: 1px dashed var(--border);
}

.bp-empty-emoji {
    font-size: 56px;
    margin-bottom: 12px;
    line-height: 1;
}

.bp-empty h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
}

.bp-empty p {
    font-size: 15px;
    color: var(--text-3);
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto 24px;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS (Popular / Recommended / Tags / Newsletter)
   ═══════════════════════════════════════════════════════════════ */

.bp-side-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    transition: box-shadow 0.3s;
}

.bp-side-card:hover {
    box-shadow: 0 12px 28px -16px rgba(99, 102, 241, 0.15);
}

.bp-side-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 18px;
    padding-bottom: 12px;
    position: relative;
    letter-spacing: -0.015em;
}

/* Underline accent under the side card heading */
.bp-side-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: var(--grad-primary);
    border-radius: 100px;
}

/* List of side items */
.bp-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bp-side-item:not(:last-child) {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.bp-side-link {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    text-decoration: none;
    align-items: start;
}

.bp-side-thumb {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-soft);
    position: relative;
}

.bp-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.bp-side-link:hover .bp-side-thumb img { transform: scale(1.08); }

.bp-side-emoji,
.bp-side-initials {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--grad-primary);
    color: white;
}

.bp-side-emoji { font-size: 32px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)); }

.bp-side-initials {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.bp-side-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bp-side-h4 {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
    margin: 0;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.22s;
}

.bp-side-link:hover .bp-side-h4 { color: var(--primary); }

.bp-side-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-5);
    font-weight: 600;
}

.bp-side-meta > span:first-child {
    color: var(--primary);
    font-weight: 800;
}

.bp-side-sep { color: var(--text-5); }

.bp-side-meta .bp-meta-icon {
    margin-left: 0;
    font-size: 11px;
}

/* ─── TAG CLOUD ───────────────────────────────────────────── */
.bp-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bp-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-decoration: none;
    transition: all 0.2s;
}

.bp-tag > span {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-5);
    background: white;
    padding: 1px 6px;
    border-radius: 100px;
}

.bp-tag:hover {
    background: var(--grad-primary);
    color: white;
    border-color: transparent;
    transform: translateY(-1px);
}

.bp-tag:hover > span {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ─── SIDEBAR NEWSLETTER ──────────────────────────────────── */
.bp-side-newsletter {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #ffffff 100%);
    border-color: rgba(99, 102, 241, 0.2);
    position: relative;
    overflow: hidden;
}

.bp-side-newsletter::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.22) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.bp-side-newsletter > * { position: relative; }

.bp-side-newsletter p {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0 0 14px;
    font-weight: 500;
}

.bp-side-newsletter form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bp-side-newsletter input {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text);
    width: 100%;
    transition: all 0.2s;
}

.bp-side-newsletter input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.bp-side-newsletter button {
    background: var(--grad-primary);
    border: none;
    color: white;
    border-radius: 12px;
    padding: 11px 14px;
    font-family: var(--font);
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.4);
}

.bp-side-newsletter button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.55);
}


/* ═══════════════════════════════════════════════════════════════
   POST DETAIL PAGE (bp-* magazine style)
   ═══════════════════════════════════════════════════════════════ */

/* ── Top bar (back link + crumbs) ─────────────────────── */
.bp-post-topbar {
    background: white;
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 20;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.92);
}

.bp-post-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg-soft);
    border-radius: 100px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.bp-back-link:hover {
    background: white;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(-2px);
}

.bp-back-link svg {
    transition: transform 0.2s;
}

.bp-back-link:hover svg {
    transform: translateX(-2px);
}

.bp-post-crumbs {
    flex: 1;
    min-width: 0;
}

.bp-post-crumbs .breadcrumbs {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 12.5px;
}

@media (max-width: 720px) {
    .bp-post-crumbs { display: none; }
}

/* ── Cover image hero (full-bleed) ────────────────────── */
.bp-post-hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--bg-soft);
}

@media (max-width: 720px) {
    .bp-post-hero { min-height: 380px; }
}

.bp-post-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.bp-post-hero-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--grad-primary);
    z-index: 0;
}

.bp-post-hero-fallback.bp-thumb-1 { background: var(--grad-primary); }
.bp-post-hero-fallback.bp-thumb-2 { background: var(--grad-accent); }
.bp-post-hero-fallback.bp-thumb-3 { background: var(--grad-warm); }

.bp-post-hero-fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.55;
}

.bp-post-hero-emoji {
    font-size: 200px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
    position: relative;
    z-index: 1;
    animation: bpHeroFloat 7s ease-in-out infinite;
}

@keyframes bpHeroFloat {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-12px) rotate(2deg); }
}

/* Dark gradient overlay so text on image stays readable */
.bp-post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
}

.bp-post-hero-inner {
    position: relative;
    z-index: 2;
    padding: 60px 0 50px;
    color: white;
}

@media (max-width: 720px) {
    .bp-post-hero-inner { padding: 40px 0 32px; }
}

.bp-post-cat-tag,
.bp-post-sub-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 14px;
}

.bp-post-cat-tag {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.55);
}

.bp-post-sub-tag {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bp-post-cat-tag:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgba(239, 68, 68, 0.7); }
.bp-post-sub-tag:hover { background: rgba(255, 255, 255, 0.25); }

.bp-post-title {
    font-size: clamp(28px, 4.4vw, 50px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: white;
    margin: 0 0 16px;
    max-width: 900px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.bp-post-excerpt {
    font-size: clamp(15px, 1.4vw, 18px);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 0 24px;
    font-weight: 500;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.bp-post-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 720px;
}

.bp-post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2),
                0 8px 20px -4px rgba(0, 0, 0, 0.3);
}

.bp-post-byline-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bp-post-author {
    font-size: 14.5px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.01em;
}

.bp-post-meta-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.bp-post-meta-sep { color: rgba(255, 255, 255, 0.4); }

.bp-post-meta-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bp-post-meta-icon svg { color: rgba(255, 255, 255, 0.7); }

/* ── Two-column body ──────────────────────────────────── */
.bp-post-body {
    padding: 56px 0 48px;
}

@media (max-width: 720px) {
    .bp-post-body { padding: 36px 0 32px; }
}

.bp-post-article {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.06);
}

@media (max-width: 720px) {
    .bp-post-article { padding: 28px 22px; border-radius: 14px; }
}

/* Tags inside the article body */
.bp-post-tags {
    margin-top: 40px !important;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bp-post-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    margin-right: 6px;
}

.bp-post-tags-label::before {
    content: '#';
    font-size: 16px;
    color: var(--primary);
    font-weight: 800;
}

/* Share row */
.bp-post-share {
    margin-top: 28px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(217, 70, 239, 0.03) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.bp-post-share-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.bp-post-share-label svg { color: var(--primary); }

.bp-post-share-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bp-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--text-3);
    transition: all 0.22s;
    cursor: pointer;
}

.bp-share-btn svg { width: 15px; height: 15px; transition: transform 0.2s; }

.bp-share-btn:hover {
    transform: translateY(-3px) scale(1.05);
    color: white;
    border-color: transparent;
    box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.18);
}

.bp-share-btn.tw:hover { background: #000; }
.bp-share-btn.fb:hover { background: #1877F2; }
.bp-share-btn.li:hover { background: #0A66C2; }
.bp-share-btn.wa:hover { background: #25D366; }
.bp-share-btn.copy:hover { background: var(--primary); }

/* Author bio card */
.bp-author-card {
    margin-top: 36px;
    padding: 26px 28px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #ffffff 100%);
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.bp-author-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.bp-author-card > * { position: relative; }

.bp-author-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: var(--grad-primary);
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 26px -6px rgba(99, 102, 241, 0.55),
                0 0 0 4px white,
                0 0 0 5px rgba(99, 102, 241, 0.18);
}

.bp-author-body { flex: 1; min-width: 0; }

.bp-author-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.bp-author-tag {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 3px 9px;
    border-radius: 100px;
}

.bp-author-body p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 540px) {
    .bp-author-card { flex-direction: column; align-items: flex-start; padding: 22px; }
}

/* ── TOC sidebar widget ───────────────────────────────── */
.bp-toc-card[hidden] { display: none; }

.bp-toc {
    display: flex;
    flex-direction: column;
}

.bp-toc a {
    display: block;
    padding: 8px 12px;
    border-left: 2px solid var(--border);
    margin-left: 0;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.45;
    transition: all 0.18s;
}

.bp-toc a:hover {
    color: var(--primary);
    border-left-color: var(--primary);
    background: var(--bg-soft);
}

.bp-toc a.toc-sub {
    padding-left: 26px;
    font-size: 12.5px;
}

.bp-toc a.active {
    color: var(--primary);
    font-weight: 700;
    border-left-color: var(--primary);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), transparent);
}

/* ── Related-posts grid (use 3-up) ────────────────────── */
.bp-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .bp-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bp-grid-3 { grid-template-columns: 1fr; } }

.bp-related {
    padding-top: 16px;
    padding-bottom: 56px;
}

/* ── Prev / Next nav (image cards) ────────────────────── */
.bp-pn {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 32px 0;
}

.bp-pn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 720px) {
    .bp-pn-grid { grid-template-columns: 1fr; }
}

.bp-pn-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    min-height: 100px;
}

.bp-pn-card.next {
    grid-template-columns: 1fr 100px;
}

.bp-pn-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 14px 30px -14px rgba(99, 102, 241, 0.4);
}

.bp-pn-thumb {
    position: relative;
    background: var(--grad-primary);
    overflow: hidden;
}

.bp-pn-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bp-pn-emoji {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 36px;
    color: white;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.bp-pn-body {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.bp-pn-card.next .bp-pn-body { text-align: right; align-items: flex-end; }

.bp-pn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-5);
    transition: color 0.2s;
}

.bp-pn-card:hover .bp-pn-eyebrow { color: var(--primary); }

.bp-pn-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.22s;
}

.bp-pn-card:hover .bp-pn-title { color: var(--primary); }

@media (max-width: 720px) {
    .bp-pn-card.next { grid-template-columns: 100px 1fr; }
    .bp-pn-card.next .bp-pn-body { text-align: left; align-items: flex-start; }
    /* On mobile, swap order so thumb stays on the left for both */
    .bp-pn-card.next .bp-pn-thumb { order: -1; }
}


/* ═══════════════════════════════════════════════════════════════
   POST PAGE v2 — Reading-flow layout
   (meta + share above image, in-content TOC, FAQ, rich author)
   Overrides the older `.bp-post-hero` block above.
   ═══════════════════════════════════════════════════════════════ */

/* Hide the old image hero — new layout shows the image inside the article */
.bp-post-hero { display: none; }

/* Article wrapper (the big white card containing everything) */
.bp-post-article {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 40px 44px;
    box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.06);
}

@media (max-width: 720px) {
    .bp-post-article { padding: 26px 20px; border-radius: 14px; }
}

/* ── Top stack: cat tag · title · excerpt · byline ─────── */
.bp-post-cat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.bp-post-article .bp-post-cat-tag {
    display: inline-flex;
    align-items: center;
    background: #ef4444;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.5);
    margin: 0;
}

.bp-post-article .bp-post-cat-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(239, 68, 68, 0.7);
}

.bp-post-article .bp-post-sub-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-soft);
    color: var(--text-2);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--border);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.bp-post-article .bp-post-sub-tag:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.bp-post-article .bp-post-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 16px;
    text-shadow: none;
    max-width: none;
}

.bp-post-article .bp-post-excerpt {
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--text-3);
    line-height: 1.6;
    margin: 0 0 22px;
    font-weight: 500;
    text-shadow: none;
    max-width: 760px;
}

/* Byline row (avatar · author · date · updated · stats) */
.bp-post-article .bp-post-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    max-width: none;
    flex-wrap: wrap;
}

.bp-post-article .bp-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-4);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    box-shadow: none;
}

.bp-post-article .bp-post-author {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.bp-post-article .bp-post-meta-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-4);
    font-weight: 600;
}

.bp-post-article .bp-post-meta-sep { color: var(--text-5); }

.bp-post-article .bp-post-meta-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-4);
}

.bp-post-article .bp-post-meta-icon svg { color: var(--text-5); }

.bp-post-meta-updated { color: var(--text-3); }

.bp-post-byline-stats {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--text-4);
    font-weight: 600;
}

.bp-post-byline-stats .bp-post-meta-icon { gap: 5px; }

@media (max-width: 540px) {
    .bp-post-byline-stats { margin-left: 0; }
}

/* ── BIG SHARE BUTTONS ROW ─────────────────────────────── */
.bp-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bp-share-row-main,
.bp-share-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bp-share-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.18s, box-shadow 0.22s, filter 0.22s;
    flex-shrink: 0;
}

.bp-share-big svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* The first FB button shows label "Facebook" — give it auto width */
.bp-share-big.fb {
    background: #1877F2;
    width: auto;
    padding: 0 16px;
}

.bp-share-big.tw       { background: #000; }
.bp-share-big.wa       { background: #25D366; }
.bp-share-big.li       { background: #0A66C2; }
.bp-share-big.tg       { background: #29A0DA; }
.bp-share-big.email    { background: #ef4444; }

/* Print + Bookmark are utility (gray) */
.bp-share-big.print,
.bp-share-big.bookmark {
    background: #f59e0b;
    color: white;
}

.bp-share-big:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.22);
}

.bp-share-big.bookmark.active {
    background: var(--primary);
}

.bp-share-big.bookmark.active svg {
    fill: currentColor;
}

@media (max-width: 540px) {
    .bp-share-row-main { width: 100%; justify-content: flex-start; }
    .bp-share-row-meta { width: 100%; justify-content: flex-start; }
    .bp-share-big.fb span { display: none; }
    .bp-share-big.fb { width: 44px; padding: 10px; }
}

/* ── COVER IMAGE inside article (no longer hero) ──────── */
.bp-post-cover {
    margin: 0 0 28px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.18);
}

.bp-post-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ── IN-CONTENT TABLE OF CONTENTS (numbered) ──────────── */
.bp-toc-card {
    margin: 0 0 32px;
    padding: 22px 26px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.05);
}

.bp-toc-card[hidden] { display: none; }

.bp-toc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.bp-toc-title svg { color: var(--primary); flex-shrink: 0; }

.bp-toc-list {
    margin: 0;
    padding: 0 0 0 24px;
    list-style: decimal;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
}

.bp-toc-list li {
    padding: 4px 0;
    line-height: 1.45;
}

.bp-toc-list li.toc-sub {
    margin-left: 14px;
    font-size: 13px;
}

.bp-toc-list a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.18s;
}

.bp-toc-list a:hover,
.bp-toc-list a.active {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── FAQ ACCORDION ────────────────────────────────────── */
.bp-faq {
    margin: 48px 0 24px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.bp-faq-h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 24px;
    text-align: center;
}

.bp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bp-faq-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.22s, box-shadow 0.22s;
}

.bp-faq-item:hover { border-color: rgba(99, 102, 241, 0.35); }

.bp-faq-item[open] {
    border-color: var(--primary);
    box-shadow: 0 12px 26px -16px rgba(99, 102, 241, 0.28);
}

.bp-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.015em;
    list-style: none;
}

.bp-faq-q::-webkit-details-marker { display: none; }

.bp-faq-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-3);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.25s;
}

.bp-faq-item[open] .bp-faq-toggle {
    background: var(--grad-primary);
    color: white;
    transform: rotate(180deg);
}

.bp-faq-a {
    padding: 0 22px 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-2);
    border-top: 1px dashed var(--border);
    padding-top: 16px;
    margin-top: 0;
}

/* ── TAGS ROW (post bottom) ───────────────────────────── */
.bp-post-article .bp-post-tags {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bp-post-article .bp-post-tags-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-right: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.bp-post-article .bp-post-tags-label::before { display: none; }

/* ── RICH AUTHOR BIO CARD (below article) ─────────────── */
.bp-author-card {
    margin-top: 28px;
    padding: 28px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: flex-start;
    box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.05);
}

@media (max-width: 540px) {
    .bp-author-card { grid-template-columns: 1fr; padding: 22px; gap: 16px; }
}

.bp-author-avatar-wrap { flex-shrink: 0; }

.bp-author-card .bp-author-avatar {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: var(--bg-soft);
    color: var(--text-4);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    box-shadow: none;
}

.bp-author-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bp-author-card .bp-author-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.015em;
}

.bp-author-card .bp-author-tag {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 3px 9px;
    border-radius: 100px;
}

.bp-author-bio {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.65;
    margin: 0 0 14px;
}

.bp-author-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bp-author-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
    text-decoration: none;
    transition: all 0.2s;
}

.bp-author-action:hover {
    background: var(--primary);
    color: white;
    border-color: transparent;
    transform: translateY(-1px);
}

/* ── RELATED SECTION (between author + sidebar bottom) ─ */
.bp-related-section {
    margin-top: 40px;
}

/* Hide the sticky vertical share rail (we now use the big inline buttons) */
.post-share-rail { display: none !important; }

/* Hide old prev/next nav block (relations grid covers it) */
.bp-pn { display: none; }


/* ═══════════════════════════════════════════════════════════════
   COMMENTS SECTION (localStorage-backed)
   ═══════════════════════════════════════════════════════════════ */

.bp-comments {
    margin-top: 36px;
    padding: 28px 0 0;
}

/* Heading with green underline accent */
.bp-comments-head {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.bp-comments-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    border-radius: 100px;
}

.bp-comments-h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.bp-comments-count {
    color: var(--text-4);
    font-weight: 700;
    margin-left: 4px;
}

/* ── Composer ─────────────────────────────────────────── */
.bp-composer {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px dashed var(--border);
}

.bp-composer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-soft);
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.15);
}

.bp-composer-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.bp-composer-input {
    width: 100%;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.55;
    resize: vertical;
    min-height: 90px;
    transition: all 0.2s;
}

.bp-composer-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.bp-composer-input::placeholder {
    color: var(--text-5);
}

.bp-composer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bp-composer-name {
    flex: 1;
    min-width: 140px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 8px 14px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    transition: all 0.2s;
}

.bp-composer-name:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.bp-composer-counter {
    font-size: 12px;
    color: var(--text-5);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bp-composer-counter.over {
    color: #ef4444;
}

.bp-composer-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    border: none;
    color: white;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 6px 14px -4px rgba(16, 185, 129, 0.45);
    letter-spacing: 0.01em;
}

.bp-composer-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(16, 185, 129, 0.6);
}

.bp-composer-submit svg {
    width: 14px;
    height: 14px;
}

/* ── Comment list ─────────────────────────────────────── */
.bp-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.bp-comment {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: flex-start;
}

.bp-comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-soft);
    flex-shrink: 0;
    box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.15);
}

.bp-comment-body {
    min-width: 0;
}

.bp-comment-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.bp-comment-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.bp-comment-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1;
}

/* "YOU" badge — teal */
.bp-comment-tag.you {
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
}

/* Role badges (per user's total comment count) */
.bp-comment-tag.role {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 11px;
}

.bp-comment-tag.role-newbie  { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.bp-comment-tag.role-starter { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
.bp-comment-tag.role-regular { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.bp-comment-tag.role-pro     { background: linear-gradient(135deg, #f59e0b, #f43f5e); color: white; }

.bp-comment-time {
    font-size: 12.5px;
    color: var(--text-4);
    font-weight: 600;
    margin-left: 2px;
}

.bp-comment-text {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

.bp-comment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text-4);
}

.bp-comment-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 4px 4px;
    color: var(--text-4);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.18s, transform 0.18s;
    text-decoration: none;
}

.bp-comment-action:hover {
    color: var(--primary);
}

.bp-comment-action.like.on {
    color: #ef4444;
}

.bp-comment-action.like.on:hover {
    color: #dc2626;
}

.bp-comment-action.delete:hover {
    color: #ef4444;
}

.bp-comment-sep {
    color: var(--text-5);
    font-weight: 400;
    font-size: 12px;
    user-select: none;
}

/* Highlight the user's own comment row very subtly */
.bp-comment.is-mine .bp-comment-name {
    /* keep neutral so it doesn't compete with the YOU badge */
}

/* ── Empty state ──────────────────────────────────────── */
.bp-comments-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-soft);
    border-radius: 14px;
    border: 1px dashed var(--border);
}

.bp-comments-empty-emoji {
    display: block;
    font-size: 36px;
    margin-bottom: 10px;
    line-height: 1;
}

.bp-comments-empty p {
    margin: 0;
    font-size: 14px;
    color: var(--text-3);
    font-weight: 500;
}

@media (max-width: 540px) {
    .bp-composer { grid-template-columns: 36px 1fr; gap: 10px; }
    .bp-composer-avatar { width: 36px; height: 36px; border-radius: 10px; }
    .bp-comment { grid-template-columns: 36px 1fr; gap: 10px; }
    .bp-comment-avatar { width: 36px; height: 36px; border-radius: 10px; }
    .bp-composer-actions { justify-content: stretch; }
    .bp-composer-name { width: 100%; }
    .bp-composer-submit { width: 100%; justify-content: center; }
}

/* Honeypot — visible to bots, hidden from humans */
.bp-composer-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Composer inline status (success / error from API) */
.bp-composer-status {
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
    color: var(--text-4);
    flex-shrink: 0;
}
.bp-composer-status-success { color: #16a34a; }
.bp-composer-status-error   { color: #dc2626; }

/* Loading spinner shown while fetching comments */
.bp-comments-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 4px;
    font-size: 13px;
    color: var(--text-4);
}

.bp-comments-loading[hidden] { display: none; }

.bp-comments-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(99, 102, 241, 0.18);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: bpSpin 0.8s linear infinite;
}

@keyframes bpSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════
   SEO/AD INFRA (Phase 6)
   ════════════════════════════════════════ */

/* "Last updated: …" badge — E-E-A-T trust signal at top of tool pages */
.last-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-4);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 5px 11px;
    border-radius: 100px;
    margin: 8px 0 16px;
    line-height: 1;
}
.last-updated-badge svg { color: #10b981; flex-shrink: 0; }
.last-updated-badge time { font-weight: 700; color: var(--text-2); }

/* AdSense slot — reserved height to prevent CLS even when empty */
.ad-container {
    min-height: 250px;
    width: 100%;
    overflow: hidden;
    margin: 32px 0;
    text-align: center;
    background: var(--bg-soft);
    border-radius: 12px;
    display: grid;
    place-items: center;
}
.ad-container ins { display: block; width: 100%; }
.ad-container:empty::before {
    /* Empty placeholder during dev — invisible but reserves space */
    content: '';
    display: block;
}