/*
Theme Name: Uhmegle
Theme URI:
Author: Uhmegle
Author URI:
Description: Modern, mobile-first WordPress theme for Uhmegle — a free random video chat platform. Purple gradient design, sticky nav with live online count, hero with video chat CTA, feature cards, testimonials, and full SEO schema. Built for AI/video chat directories and Omegle-alternative sites.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uhmegle
Tags: blog, one-column, custom-colors, custom-logo, custom-menu, featured-images, theme-options, threaded-comments, translation-ready, block-styles, block-patterns, editor-style
*/

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
    --purple:       #6c47ff;
    --purple-d:     #4f2fe8;
    --purple-dd:    #3318c4;
    --purple-l:     #ede9ff;
    --purple-ll:    #f5f3ff;
    --purple-glow:  rgba(108, 71, 255, .22);
    --violet:       #8b5cf6;
    --indigo:       #4338ca;
    --pink:         #ec4899;
    --pink-hot:     #ff4d8d;
    --teal:         #14b8a6;
    --amber:        #f59e0b;
    --green:        #10b981;
    --red:          #ef4444;
    --white:        #ffffff;
    --bg:           #fafaff;
    --bg2:          #f4f1ff;
    --card:         #ffffff;
    --text:         #0f0928;
    --text2:        #3d3561;
    --muted:        #7c6fa0;
    --border:       #e5e1f8;
    --dark:         #0d0b1e;
    --dark2:        #1a1535;
    --r-sm:         12px;
    --r-md:         18px;
    --r-lg:         26px;
    --r-xl:         50px;
    --sh:           0 4px 24px rgba(108, 71, 255, .14);
    --sh-md:        0 12px 40px rgba(108, 71, 255, .20);
    --sh-lg:        0 24px 72px rgba(108, 71, 255, .25);
    --font-h:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-b:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-b);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
img { display: block; max-width: 100%; height: auto; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--purple);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    z-index: 9999;
}
.skip-link:focus { left: 12px; top: 12px; }
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px; width: 1px; overflow: hidden;
}

/* ═══════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════ */
.wrap, .container {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 900px) {
    .wrap, .container { max-width: 1140px; }
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--purple-l);
    border: 1px solid rgba(108, 71, 255, .3);
    border-radius: var(--r-xl);
    padding: 6px 14px;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .68rem;
    color: var(--purple-d);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 14px;
}
.pill.white {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.h2 {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.7rem, 6vw, 2rem);
    line-height: 1.12;
    letter-spacing: -.5px;
    color: var(--text);
    margin-bottom: 10px;
}
.h2 .it { font-style: italic; color: var(--purple); }
.h2.light { color: #fff; }

.sub {
    font-size: .93rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 28px;
}
.sub.light { color: rgba(255, 255, 255, .76); }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: .95rem;
    padding: 15px 28px;
    border-radius: var(--r-xl);
    transition: transform .15s, box-shadow .2s, background .2s;
    cursor: pointer;
    border: none;
    text-align: center;
    width: 100%;
    text-decoration: none;
    color: #fff;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-purple {
    background: linear-gradient(135deg, var(--purple), var(--purple-d));
    color: #fff;
    box-shadow: 0 6px 24px rgba(108, 71, 255, .45);
}
.btn-purple:hover {
    box-shadow: 0 12px 36px rgba(108, 71, 255, .55);
    color: #fff;
}
.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .5);
}
.btn-outline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}
.btn-white {
    background: #fff;
    color: var(--purple-d);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
}
.btn-white:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
    color: var(--purple-d);
}
.btn-hero-lg {
    font-size: 1.12rem;
    padding: 19px 34px;
    width: auto;
    margin-bottom: 28px;
    animation: slideUp .55s .14s ease both;
}
.btn-hero-lg:hover { box-shadow: 0 16px 44px rgba(108, 71, 255, .6); }
.btn-video {
    background: linear-gradient(135deg, #ff4d8d, #c92160);
    color: #fff;
    box-shadow: 0 6px 24px rgba(255, 77, 141, .4);
}
.btn-video:hover {
    box-shadow: 0 12px 36px rgba(255, 77, 141, .55);
    color: #fff;
}
.btn-sm { font-size: .82rem; padding: 11px 20px; width: auto; }

/* ═══════════════════════════════════════════
   FLOATING CTA
═══════════════════════════════════════════ */
#floatBtn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(90px);
    z-index: 999;
    opacity: 0;
    background: linear-gradient(135deg, var(--purple), var(--purple-d));
    color: #fff;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: .88rem;
    padding: 13px 28px;
    border-radius: var(--r-xl);
    box-shadow: 0 8px 32px rgba(108, 71, 255, .55);
    white-space: nowrap;
    transition: transform .3s ease, opacity .3s ease, box-shadow .2s;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
#floatBtn.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
#floatBtn:hover { box-shadow: 0 14px 44px rgba(108, 71, 255, .65); }

/* ═══════════════════════════════════════════
   NAV — slightly taller (78px) with more vertical breathing room
   (user requested menu positioned lower)
═══════════════════════════════════════════ */
.nav {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding-top: 8px;     /* extra space at top → menu sits lower */
    padding-bottom: 8px;
}
.nav-inner {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
}
@media (min-width: 900px) {
    .nav-inner { max-width: 1140px; }
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.logo-box {
    width: 40px; height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--purple), var(--purple-d));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(108, 71, 255, .4);
    color: #fff;
}
.logo-box svg { width: 20px; height: 20px; }
.logo-text {
    font-family: var(--font-h);
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--text);
    letter-spacing: -.3px;
}
.logo-text span { color: var(--purple); }
.nav-count {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--purple-ll);
    border: 1px solid rgba(108, 71, 255, .2);
    border-radius: var(--r-xl);
    padding: 6px 12px;
}
.dot-green {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.nav-count span {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: .8rem;
    color: var(--purple-d);
}
.nav-menu-toggle {
    display: none;
    background: transparent;
    padding: 6px;
    color: var(--text);
}
.nav-menu-toggle svg { width: 24px; height: 24px; }

/* Desktop nav menu */
.nav-menu {
    display: none;
    list-style: none;
    gap: 26px;
    align-items: center;
}
@media (min-width: 900px) {
    .nav-menu {
        display: flex;
    }
    .nav-count + .nav-menu-toggle { display: none; }
}
.nav-menu a {
    font-family: var(--font-h);
    font-weight: 600;
    font-size: .95rem;
    color: var(--text2);
    transition: color .2s;
}
.nav-menu a:hover { color: var(--purple); }
.nav-menu .current-menu-item a {
    color: var(--purple);
    font-weight: 700;
}

/* Mobile hamburger */
@media (max-width: 899px) {
    .nav-menu-toggle { display: inline-flex; }
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
    background: linear-gradient(160deg, #f0ecff 0%, #e4dcff 35%, #cfc5ff 70%, #bdb0ff 100%);
    padding: 44px 20px 0;
    overflow: hidden;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -100px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108, 71, 255, .25) 0%, transparent 70%);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 60px; left: -80px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .2) 0%, transparent 70%);
    pointer-events: none;
}
.hero-inner {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
@media (min-width: 900px) {
    .hero-inner { max-width: 720px; }
}
.online-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .82);
    border: 1.5px solid rgba(108, 71, 255, .3);
    border-radius: var(--r-xl);
    padding: 8px 16px;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .82rem;
    color: var(--purple-d);
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    animation: slideDown .55s ease both;
}
.pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    animation: pulseAnim 1.8s ease-in-out infinite;
}
@keyframes pulseAnim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-h1 {
    font-family: var(--font-h);
    font-weight: 900;
    font-size: clamp(2.3rem, 8vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -1.2px;
    color: var(--text);
    margin-bottom: 16px;
    animation: slideUp .55s .1s ease both;
}
.hero-h1 em { color: var(--purple); font-style: italic; }
.hero-p {
    font-size: 1rem;
    color: var(--text2);
    line-height: 1.72;
    margin-bottom: 28px;
    max-width: 380px;
    animation: slideUp .55s .18s ease both;
}
.hero-card {
    background: #fff;
    border-radius: 24px;
    padding: 28px 22px;
    box-shadow: 0 20px 60px rgba(108, 71, 255, .22);
    margin-bottom: 0;
    animation: slideUp .6s .25s ease both;
}
.hero-card h3 {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 8px;
}
.hero-card p {
    font-size: .88rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 22px;
}
.mode-label {
    text-align: center;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .88rem;
    color: var(--text2);
    margin-bottom: 12px;
}
.interest-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font-b);
    font-size: .88rem;
    color: var(--text);
    background: var(--purple-ll);
    outline: none;
    margin-bottom: 14px;
    transition: border-color .2s;
}
.interest-input:focus { border-color: var(--purple); }
.interest-input::placeholder { color: var(--muted); }
.moderation-note {
    background: var(--purple-ll);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .83rem;
    color: var(--purple-d);
    line-height: 1.4;
}
.mod-icon { font-size: 1.2rem; flex-shrink: 0; }
.mini-feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 28px 0 0;
    padding-bottom: 44px;
}
.mini-feat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(108, 71, 255, .07);
    transition: transform .2s, box-shadow .2s;
}
.mini-feat:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.mini-feat-icon { font-size: 1.6rem; margin-bottom: 7px; }
.mini-feat-label {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .78rem;
    color: var(--text2);
    line-height: 1.3;
}

/* ═══════════════════════════════════════════
   STATS
═══════════════════════════════════════════ */
.stats-wrap {
    padding: 0 20px 44px;
    max-width: 500px;
    margin: 0 auto;
}
@media (min-width: 900px) { .stats-wrap { max-width: 720px; } }
.stats-card {
    background: linear-gradient(135deg, var(--purple-d), var(--purple-dd));
    border-radius: var(--r-lg);
    padding: 28px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    box-shadow: var(--sh-lg);
}
@media (min-width: 600px) { .stats-card { grid-template-columns: repeat(4, 1fr); } }
.sc { text-align: center; }
.sc strong {
    display: block;
    font-family: var(--font-h);
    font-weight: 900;
    font-size: 2rem;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 4px;
}
.sc span {
    font-size: .8rem;
    color: rgba(255, 255, 255, .72);
}

/* ═══════════════════════════════════════════
   SECTION BASE
═══════════════════════════════════════════ */
.sec {
    padding: 52px 20px;
    max-width: 500px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .sec { max-width: 1140px; padding: 80px 20px; }
}

/* ═══════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════ */
.feats-bg { background: #fff; }
.feat-stack { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
    .feat-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
.feat-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh);
    border-color: rgba(108, 71, 255, .3);
}
.feat-icon-box {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.fi-p { background: #ede9ff; }
.fi-g { background: #d1fae5; }
.fi-b { background: #dbeafe; }
.fi-y { background: #fef9c3; }
.fi-r { background: #ffe4e6; }
.fi-i { background: #f0e8ff; }
.feat-body h3 {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: .98rem;
    margin-bottom: 5px;
}
.feat-body p {
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════ */
.how-bg {
    background: linear-gradient(180deg, var(--purple-ll) 0%, var(--bg2) 100%);
}
.steps { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
    .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
.step {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 22px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform .2s;
}
.step:hover { transform: translateY(-2px); }
.step-watermark {
    position: absolute;
    right: 14px; top: 6px;
    font-family: var(--font-h);
    font-weight: 900;
    font-size: 4.5rem;
    color: rgba(108, 71, 255, .06);
    line-height: 1;
    user-select: none;
}
.step-n {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--purple-d));
    color: #fff;
    font-family: var(--font-h);
    font-weight: 900;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(108, 71, 255, .45);
}
.step-body h3 {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: .98rem;
    margin-bottom: 5px;
}
.step-body p {
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════
   CHAT PROMPTS
═══════════════════════════════════════════ */
.chat-bg { background: #fff; }
.chat-feed { display: flex; flex-direction: column; gap: 10px; }
.chat-msg {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 13px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: border-color .2s, transform .15s;
}
.chat-msg:hover {
    border-color: rgba(108, 71, 255, .35);
    transform: translateX(4px);
}
.cflag { font-size: 1.3rem; flex-shrink: 0; }
.cname {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .76rem;
    color: var(--purple-d);
    margin-bottom: 2px;
}
.cname span { color: var(--muted); font-weight: 500; }
.ctxt {
    font-size: .88rem;
    color: var(--text);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════ */
.testi-bg { background: var(--bg); }
.testi-stack { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
    .testi-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.testi-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    transition: transform .2s, box-shadow .2s;
}
.testi-card:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.stars {
    color: #f59e0b;
    font-size: .8rem;
    letter-spacing: 2px;
    margin-bottom: 9px;
}
.tq {
    font-size: .88rem;
    color: var(--text);
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 14px;
}
.testi-user {
    display: flex;
    align-items: center;
    gap: 11px;
}
.testi-av {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--violet));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: .9rem;
    flex-shrink: 0;
}
.testi-meta strong {
    display: block;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .82rem;
    color: var(--text);
}
.testi-meta span {
    font-size: .74rem;
    color: var(--muted);
}

/* ═══════════════════════════════════════════
   MID CTA BANNER
═══════════════════════════════════════════ */
.cta-band {
    background: linear-gradient(150deg, var(--purple) 0%, var(--purple-d) 55%, var(--purple-dd) 100%);
    position: relative;
    overflow: hidden;
    padding: 52px 20px;
}
.cta-band::before {
    content: '';
    position: absolute;
    top: -90px; right: -90px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, transparent 70%);
}
.cta-band::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 70%);
}
.cta-band-inner {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 900px) { .cta-band-inner { max-width: 720px; } }
.cta-band .btn { max-width: 320px; margin: 0 auto; }

/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
.faq-bg { background: #fff; }
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
}
.faq-q::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--purple);
    transition: transform .2s;
    line-height: 1;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    font-size: .88rem;
    color: var(--text2);
    line-height: 1.7;
}
.faq-item.open .faq-a { padding: 0 20px 18px; max-height: 500px; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer {
    background: var(--dark);
    color: rgba(255, 255, 255, .65);
    padding: 60px 20px 28px;
    margin-top: 0;
}
.footer-inner {
    max-width: 500px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .footer-inner { max-width: 1140px; }
    .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
}
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo-text span { color: var(--purple); }
.footer-brand p {
    margin-top: 14px;
    font-size: .88rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .55);
}
.footer-col { margin-top: 36px; }
@media (min-width: 900px) { .footer-col { margin-top: 0; } }
.footer-col h4 {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    margin-bottom: 14px;
}
.footer-col ul {
    list-style: none;
}
.footer-col li {
    margin-bottom: 9px;
    font-size: .87rem;
}
.footer-col a {
    color: rgba(255, 255, 255, .65);
    transition: color .2s;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .45);
}
@media (min-width: 900px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.social-links a {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .7);
    transition: background .2s, color .2s;
}
.social-links a:hover {
    background: var(--purple);
    color: #fff;
}
.social-links svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════ */
.mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 11, 30, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 998;
    backdrop-filter: blur(2px);
}
.mobile-drawer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.mobile-drawer {
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 86vw);
    height: 100vh; height: 100dvh;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0, 0, 0, .2);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.32, .72, 0, 1);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 20px;
    border-bottom: 1px solid var(--border);
}
.mobile-drawer__close {
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    color: var(--text);
    transition: background .2s;
}
.mobile-drawer__close:hover { background: var(--purple-ll); }
.mobile-drawer__nav {
    padding: 18px 20px;
    flex: 1;
}
.mobile-drawer__menu {
    list-style: none;
}
.mobile-drawer__menu li {
    border-bottom: 1px solid var(--border);
}
.mobile-drawer__menu a {
    display: block;
    padding: 16px 4px;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    transition: color .2s;
}
.mobile-drawer__menu a:hover { color: var(--purple); }
.mobile-drawer__cta {
    padding: 20px;
    border-top: 1px solid var(--border);
}
body.drawer-open { overflow: hidden; }

/* ═══════════════════════════════════════════
   ARTICLE / PAGE CONTENT
═══════════════════════════════════════════ */
.article {
    padding: 40px 20px 60px;
    max-width: 720px;
    margin: 0 auto;
}
.article h1 {
    font-family: var(--font-h);
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1.12;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: -1px;
}
.article h2 {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: 1.5rem;
    margin: 36px 0 12px;
    color: var(--text);
}
.article h3 {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 24px 0 8px;
}
.article p {
    font-size: 1rem;
    color: var(--text2);
    line-height: 1.78;
    margin-bottom: 16px;
}
.article a {
    color: var(--purple-d);
    border-bottom: 1.5px solid var(--purple-l);
}
.article a:hover { border-color: var(--purple); }
.article ul, .article ol {
    margin: 12px 0 24px 24px;
}
.article li {
    margin-bottom: 8px;
    color: var(--text2);
}
.article strong { color: var(--text); font-weight: 700; }
.article img { border-radius: var(--r-md); margin: 20px 0; }

.page-hero {
    background: linear-gradient(160deg, #f0ecff 0%, #e4dcff 60%, #cfc5ff 100%);
    padding: 50px 20px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108, 71, 255, .2), transparent 70%);
}
.page-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.page-hero h1 {
    font-family: var(--font-h);
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 2.6rem);
    color: var(--text);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 12px;
}
.page-hero p {
    font-size: 1.05rem;
    color: var(--text2);
    line-height: 1.7;
}

/* Blog cards */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 30px 0;
}
@media (min-width: 700px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .post-grid { grid-template-columns: repeat(3, 1fr); }
}
.post-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.post-card__media {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--purple-l), var(--purple-ll));
    overflow: hidden;
}
.post-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 18px 20px 22px; }
.post-card__tag {
    display: inline-block;
    background: var(--purple-l);
    color: var(--purple-d);
    padding: 4px 10px;
    border-radius: var(--r-xl);
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.post-card__title {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 8px;
}
.post-card__title a { color: var(--text); }
.post-card__title a:hover { color: var(--purple); }
.post-card__excerpt {
    font-size: .87rem;
    color: var(--muted);
    line-height: 1.65;
}

/* Comments */
.comments-area { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--border); }
.comments-area h3 { font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; margin-bottom: 18px; }
.comment-list { list-style: none; }
.comment-list .comment {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.comment-respond { margin-top: 30px; }
.comment-respond label { display: block; font-weight: 600; margin: 12px 0 4px; }
.comment-respond input, .comment-respond textarea {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--border); border-radius: var(--r-md);
    font-family: var(--font-b); font-size: .9rem;
    outline: none;
}
.comment-respond input:focus, .comment-respond textarea:focus { border-color: var(--purple); }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 40px 0;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--border);
    font-family: var(--font-h);
    font-weight: 700;
    font-size: .9rem;
    color: var(--text2);
    transition: all .2s;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}