/* =============================================
   TEST YOUR MIND — Design System
   SOULCAKEY | 2025
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
  --color-bg:         #0d0118;
  --color-bg-2:       #130825;
  --color-surface:    rgba(255,255,255,0.04);
  --color-surface-2:  rgba(255,255,255,0.08);
  --color-border:     rgba(139,92,246,0.2);
  --color-primary:    #8b5cf6;
  --color-primary-2:  #a78bfa;
  --color-gold:       #f59e0b;
  --color-gold-2:     #fbbf24;
  --color-text:       #e2d9f3;
  --color-text-muted: #9d8ec4;
  --color-white:      #ffffff;
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        24px;
  --radius-xl:        36px;
  --shadow-glow:      0 0 40px rgba(139,92,246,0.25);
  --shadow-card:      0 8px 32px rgba(0,0,0,0.4);
  --font-body:        'Inter', sans-serif;
  --font-display:     'Playfair Display', serif;
  --transition:       all 0.3s cubic-bezier(0.4,0,0.2,1);
  --header-h:         72px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--color-bg); color:var(--color-text); line-height:1.7; min-height:100vh; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; }

/* Background Orbs */
.bg-orbs { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg-orbs::before { content:''; position:absolute; top:-20%; left:-10%; width:600px; height:600px; background:radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%); border-radius:50%; animation:orbFloat1 20s ease-in-out infinite; }
.bg-orbs::after { content:''; position:absolute; bottom:-20%; right:-10%; width:500px; height:500px; background:radial-gradient(circle, rgba(245,158,11,0.1) 0%, transparent 70%); border-radius:50%; animation:orbFloat2 25s ease-in-out infinite; }

/* Layout */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:80px 0; position:relative; z-index:1; }
.section-title { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.8rem); background:linear-gradient(135deg,var(--color-white) 0%,var(--color-primary-2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:12px; }
.section-subtitle { color:var(--color-text-muted); font-size:1.1rem; margin-bottom:48px; }
.section-header { text-align:center; margin-bottom:48px; }

/* Glass Card */
.glass-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:var(--transition); }
.glass-card:hover { background:var(--color-surface-2); border-color:rgba(139,92,246,0.4); transform:translateY(-4px); box-shadow:var(--shadow-glow); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:50px; font-size:1rem; font-weight:600; transition:var(--transition); cursor:pointer; white-space:nowrap; }
.btn-primary { background:linear-gradient(135deg,var(--color-primary),#6d28d9); color:#fff; box-shadow:0 4px 20px rgba(139,92,246,0.4); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(139,92,246,0.6); }
.btn-secondary { background:transparent; color:var(--color-primary-2); border:2px solid rgba(139,92,246,0.4); }
.btn-secondary:hover { background:rgba(139,92,246,0.1); border-color:var(--color-primary); }
.btn-gold { background:linear-gradient(135deg,var(--color-gold),#d97706); color:#1a0533; font-weight:700; box-shadow:0 4px 20px rgba(245,158,11,0.4); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(245,158,11,0.6); }
.btn-lg { padding:18px 44px; font-size:1.1rem; }
.btn-sm { padding:10px 22px; font-size:0.9rem; }
.btn-block { width:100%; justify-content:center; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:50px; font-size:0.78rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
.badge-purple { background:rgba(139,92,246,0.15); color:var(--color-primary-2); border:1px solid rgba(139,92,246,0.3); }
.badge-gold   { background:rgba(245,158,11,0.15);  color:var(--color-gold-2);    border:1px solid rgba(245,158,11,0.3); }
.badge-rose   { background:rgba(244,63,94,0.15);   color:#fb7185;                border:1px solid rgba(244,63,94,0.3);  }
.badge-teal   { background:rgba(20,184,166,0.15);  color:#2dd4bf;                border:1px solid rgba(20,184,166,0.3); }
.badge-blue   { background:rgba(59,130,246,0.15);  color:#93c5fd;                border:1px solid rgba(59,130,246,0.3); }

/* Header */
.header { position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:1000; background:rgba(13,1,24,0.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--color-border); transition:var(--transition); }
.header.scrolled { background:rgba(13,1,24,0.97); box-shadow:0 4px 32px rgba(0,0,0,0.5); }
.nav { display:flex; align-items:center; justify-content:space-between; height:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.nav-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--color-white); }
.nav-logo .logo-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--color-primary),#6d28d9); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 4px 16px rgba(139,92,246,0.4); }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a { padding:8px 16px; border-radius:8px; font-size:0.95rem; font-weight:500; color:var(--color-text-muted); transition:var(--transition); }
.nav-links a:hover,.nav-links a.active { color:var(--color-white); background:rgba(139,92,246,0.12); }
.nav-cta { background:linear-gradient(135deg,var(--color-primary),#6d28d9) !important; color:#fff !important; border-radius:50px !important; padding:8px 20px !important; box-shadow:0 4px 16px rgba(139,92,246,0.3); }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(139,92,246,0.5) !important; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--color-text); border-radius:2px; transition:var(--transition); }
.mobile-nav { display:none; position:fixed; top:var(--header-h); left:0; right:0; background:rgba(13,1,24,0.98); backdrop-filter:blur(20px); border-bottom:1px solid var(--color-border); padding:20px 24px; flex-direction:column; gap:4px; z-index:999; }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:12px 16px; border-radius:8px; font-weight:500; color:var(--color-text-muted); transition:var(--transition); }
.mobile-nav a:hover { background:var(--color-surface-2); color:var(--color-white); }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; padding:calc(var(--header-h) + 40px) 0 80px; position:relative; z-index:1; }
.hero-content { max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:50px; background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.3); font-size:0.88rem; font-weight:500; color:var(--color-primary-2); margin-bottom:24px; }
.hero-title { font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.15; color:var(--color-white); margin-bottom:20px; }
.hero-title span { background:linear-gradient(135deg,var(--color-primary-2),var(--color-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:1.15rem; color:var(--color-text-muted); line-height:1.8; margin-bottom:36px; max-width:520px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:52px; }
.hero-stats { display:flex; gap:36px; }
.hero-stat-num { font-size:1.6rem; font-weight:800; color:var(--color-white); display:block; line-height:1; margin-bottom:4px; }
.hero-stat-label { font-size:0.85rem; color:var(--color-text-muted); }
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.hero-card-stack { position:relative; width:340px; height:420px; }
.hero-card { position:absolute; width:280px; padding:28px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); backdrop-filter:blur(16px); }
.hero-card:nth-child(1) { top:0; left:0; transform:rotate(-6deg); background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(109,40,217,0.08)); animation:cardFloat1 6s ease-in-out infinite; }
.hero-card:nth-child(2) { top:60px; left:60px; background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(217,119,6,0.06)); border-color:rgba(245,158,11,0.2); animation:cardFloat2 7s ease-in-out infinite 0.5s; }
.hero-card:nth-child(3) { top:120px; left:30px; transform:rotate(4deg); background:linear-gradient(135deg,rgba(20,184,166,0.1),rgba(15,118,110,0.06)); border-color:rgba(20,184,166,0.2); animation:cardFloat1 8s ease-in-out infinite 1s; }
.hero-card-icon { font-size:2rem; margin-bottom:12px; }
.hero-card-title { font-weight:600; color:var(--color-white); margin-bottom:4px; font-size:0.95rem; }
.hero-card-sub { font-size:0.8rem; color:var(--color-text-muted); }

/* Categories */
.categories-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.category-card { padding:28px 24px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); cursor:pointer; transition:var(--transition); text-align:center; text-decoration:none; display:block; }
.category-card:hover { background:var(--color-surface-2); transform:translateY(-4px); border-color:rgba(139,92,246,0.4); }
.category-icon { font-size:2.4rem; margin-bottom:12px; display:block; }
.category-name { font-weight:600; color:var(--color-white); margin-bottom:4px; font-size:1rem; }
.category-count { font-size:0.83rem; color:var(--color-text-muted); }

/* Test Cards */
.tests-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.test-card { border-radius:var(--radius-lg); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); transition:var(--transition); cursor:pointer; text-decoration:none; display:block; }
.test-card:hover { transform:translateY(-6px); border-color:rgba(139,92,246,0.4); box-shadow:var(--shadow-glow); }
.test-card-thumb-placeholder { width:100%; height:180px; display:flex; align-items:center; justify-content:center; font-size:4rem; }
.test-card-body { padding:20px; }
.test-card-meta { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.test-card-title { font-weight:700; font-size:1.05rem; color:var(--color-white); line-height:1.4; margin-bottom:8px; }
.test-card-desc { font-size:0.9rem; color:var(--color-text-muted); line-height:1.6; margin-bottom:16px; }
.test-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--color-border); }
.test-card-info { font-size:0.82rem; color:var(--color-text-muted); display:flex; gap:12px; align-items:center; }

/* About Brief */
.about-brief { background:linear-gradient(135deg,rgba(139,92,246,0.08),rgba(109,40,217,0.04)); border:1px solid rgba(139,92,246,0.15); border-radius:var(--radius-xl); padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-brief-text h2 { font-family:var(--font-display); font-size:2rem; color:var(--color-white); margin-bottom:16px; }
.about-brief-text p { color:var(--color-text-muted); line-height:1.8; margin-bottom:12px; }
.about-features { display:flex; flex-direction:column; gap:16px; }
.about-feature { display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:var(--radius-md); background:rgba(255,255,255,0.03); border:1px solid var(--color-border); }
.about-feature-icon { width:42px; height:42px; min-width:42px; border-radius:10px; background:linear-gradient(135deg,var(--color-primary),#6d28d9); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.about-feature-title { font-weight:600; color:var(--color-white); margin-bottom:2px; font-size:0.95rem; }
.about-feature-desc { font-size:0.85rem; color:var(--color-text-muted); }

/* Articles */
.articles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card { padding:28px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); transition:var(--transition); text-decoration:none; display:block; }
.article-card:hover { background:var(--color-surface-2); transform:translateY(-4px); border-color:rgba(139,92,246,0.4); }
.article-card-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.article-card-date { font-size:0.83rem; color:var(--color-text-muted); }
.article-card-title { font-weight:700; font-size:1.05rem; color:var(--color-white); line-height:1.45; margin-bottom:10px; }
.article-card-excerpt { font-size:0.9rem; color:var(--color-text-muted); line-height:1.65; }
.article-card-footer { margin-top:18px; padding-top:14px; border-top:1px solid var(--color-border); font-size:0.85rem; color:var(--color-primary-2); display:flex; align-items:center; gap:6px; }

/* Footer */
.footer { background:var(--color-bg-2); border-top:1px solid var(--color-border); padding:60px 0 32px; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--color-white); margin-bottom:14px; }
.footer-logo .logo-icon { width:34px; height:34px; background:linear-gradient(135deg,var(--color-primary),#6d28d9); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.footer-brand-desc { font-size:0.9rem; color:var(--color-text-muted); line-height:1.7; max-width:280px; }
.footer-col-title { font-weight:600; color:var(--color-white); margin-bottom:16px; font-size:0.95rem; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:0.9rem; color:var(--color-text-muted); transition:var(--transition); }
.footer-links a:hover { color:var(--color-primary-2); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid var(--color-border); font-size:0.85rem; color:var(--color-text-muted); }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { color:var(--color-text-muted); transition:var(--transition); }
.footer-bottom-links a:hover { color:var(--color-primary-2); }

/* Page Header */
.page-header { padding:calc(var(--header-h) + 60px) 0 60px; text-align:center; position:relative; z-index:1; }
.page-header-title { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); color:var(--color-white); margin-bottom:14px; }
.page-header-desc { font-size:1.1rem; color:var(--color-text-muted); max-width:560px; margin:0 auto; }

/* Test Detail */
.test-detail-layout { display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.test-detail-sidebar { position:sticky; top:calc(var(--header-h) + 24px); }
.test-sidebar-card { padding:28px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); margin-bottom:20px; }
.test-sidebar-stat { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--color-border); }
.test-sidebar-stat:last-child { border-bottom:none; }
.test-sidebar-label { font-size:0.88rem; color:var(--color-text-muted); }
.test-sidebar-value { font-size:0.95rem; font-weight:600; color:var(--color-white); }
.related-test-item { display:flex; gap:12px; align-items:center; padding:12px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.03); margin-bottom:10px; text-decoration:none; transition:var(--transition); }
.related-test-item:hover { background:var(--color-surface-2); transform:translateX(4px); }
.related-test-thumb { width:52px; height:52px; min-width:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:var(--color-surface-2); }
.related-test-title { font-size:0.88rem; font-weight:600; color:var(--color-white); line-height:1.35; }
.related-test-meta { font-size:0.78rem; color:var(--color-text-muted); margin-top:2px; }

/* Test Play */
.test-play-wrapper { min-height:100vh; padding:calc(var(--header-h) + 40px) 0 80px; position:relative; z-index:1; }
.test-play-container { max-width:760px; margin:0 auto; padding:0 24px; }
.test-progress-bar-track { width:100%; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; margin-bottom:48px; overflow:hidden; }
.test-progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--color-primary),var(--color-gold)); border-radius:3px; transition:width 0.5s cubic-bezier(0.4,0,0.2,1); }
.test-question-num { font-size:0.88rem; color:var(--color-text-muted); margin-bottom:8px; font-weight:500; }
.test-question-text { font-family:var(--font-display); font-size:clamp(1.3rem,2.5vw,1.8rem); color:var(--color-white); line-height:1.45; margin-bottom:40px; }
.test-options { display:flex; flex-direction:column; gap:14px; }
.test-option { display:flex; align-items:center; gap:16px; padding:20px 24px; border-radius:var(--radius-md); background:var(--color-surface); border:2px solid var(--color-border); cursor:pointer; transition:var(--transition); font-size:1rem; color:var(--color-text); text-align:left; }
.test-option:hover { background:rgba(139,92,246,0.08); border-color:rgba(139,92,246,0.4); color:var(--color-white); transform:translateX(4px); }
.test-option.selected { background:rgba(139,92,246,0.15); border-color:var(--color-primary); color:var(--color-white); }
.test-option-letter { width:34px; height:34px; min-width:34px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.88rem; color:var(--color-text-muted); transition:var(--transition); }
.test-option:hover .test-option-letter,.test-option.selected .test-option-letter { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.test-nav-btns { display:flex; justify-content:space-between; align-items:center; margin-top:40px; padding-top:32px; border-top:1px solid var(--color-border); }

/* Result Page */
.result-hero { padding:calc(var(--header-h) + 40px) 0 60px; text-align:center; position:relative; z-index:1; }
.result-type-badge { display:inline-flex; align-items:center; gap:10px; padding:12px 28px; border-radius:50px; font-size:1.1rem; font-weight:700; background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(109,40,217,0.15)); border:1px solid rgba(139,92,246,0.4); color:var(--color-primary-2); margin-bottom:20px; }
.result-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); color:var(--color-white); margin-bottom:14px; }
.result-emoji { font-size:4rem; margin-bottom:20px; display:block; }
.result-visual-card { max-width:680px; margin:0 auto 40px; padding:40px; border-radius:var(--radius-xl); background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(245,158,11,0.06)); border:1px solid rgba(139,92,246,0.25); }
.result-traits { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:24px 0; }
.result-trait { padding:8px 18px; border-radius:50px; font-size:0.9rem; font-weight:500; background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.25); color:var(--color-primary-2); }
.result-share { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:32px 0; }

/* Static Pages */
.static-page { padding:calc(var(--header-h) + 60px) 0 80px; position:relative; z-index:1; }
.static-content { max-width:800px; margin:0 auto; padding:0 24px; }
.static-content h1 { font-family:var(--font-display); font-size:2.4rem; color:var(--color-white); margin-bottom:8px; }
.static-content .last-updated { font-size:0.88rem; color:var(--color-text-muted); margin-bottom:40px; }
.static-content h2 { font-size:1.3rem; font-weight:700; color:var(--color-white); margin:36px 0 12px; }
.static-content h3 { font-size:1.1rem; font-weight:600; color:var(--color-primary-2); margin:24px 0 8px; }
.static-content p { color:var(--color-text-muted); line-height:1.8; margin-bottom:14px; }
.static-content ul { padding-left:20px; margin-bottom:14px; }
.static-content ul li { color:var(--color-text-muted); line-height:1.8; list-style:disc; margin-bottom:4px; }
.static-content a { color:var(--color-primary-2); text-decoration:underline; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-info h2 { font-family:var(--font-display); font-size:2rem; color:var(--color-white); margin-bottom:14px; }
.contact-info p { color:var(--color-text-muted); line-height:1.8; margin-bottom:28px; }
.contact-detail { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.contact-detail-icon { width:44px; height:44px; border-radius:12px; background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.2); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.contact-detail-text strong { display:block; color:var(--color-white); font-size:0.95rem; margin-bottom:2px; }
.contact-detail-text span { font-size:0.88rem; color:var(--color-text-muted); }
.contact-form { padding:36px; border-radius:var(--radius-xl); background:var(--color-surface); border:1px solid var(--color-border); }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:0.9rem; font-weight:500; color:var(--color-text); margin-bottom:8px; }
.form-input,.form-select,.form-textarea { width:100%; padding:14px 16px; background:rgba(255,255,255,0.04); border:1px solid var(--color-border); border-radius:var(--radius-sm); color:var(--color-white); font-size:0.95rem; outline:none; transition:var(--transition); }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--color-primary); background:rgba(139,92,246,0.06); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--color-text-muted); }
.form-textarea { height:140px; resize:vertical; }
.form-select option { background:var(--color-bg-2); }

/* Filter */
.filter-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:36px; }
.filter-btn { padding:8px 20px; border-radius:50px; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text-muted); font-size:0.9rem; font-weight:500; cursor:pointer; transition:var(--transition); }
.filter-btn:hover,.filter-btn.active { background:rgba(139,92,246,0.12); border-color:rgba(139,92,246,0.4); color:var(--color-white); }
.search-bar { display:flex; align-items:center; gap:10px; padding:10px 18px; border-radius:50px; background:var(--color-surface); border:1px solid var(--color-border); margin-left:auto; }
.search-bar input { background:none; border:none; outline:none; color:var(--color-text); font-size:0.9rem; width:200px; }
.search-bar input::placeholder { color:var(--color-text-muted); }

/* Utilities */
.text-center { text-align:center; }
.text-white { color:var(--color-white); }
.text-muted { color:var(--color-text-muted); }
.text-gradient { background:linear-gradient(135deg,var(--color-primary-2),var(--color-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.divider { height:1px; background:var(--color-border); margin:32px 0; }
.mt-4 { margin-top:16px; }
.mb-4 { margin-bottom:16px; }

/* Scroll Top */
#scrollTop { position:fixed; bottom:32px; right:32px; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--color-primary),#6d28d9); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; cursor:pointer; z-index:900; opacity:0; transform:translateY(12px); transition:var(--transition); box-shadow:0 4px 20px rgba(139,92,246,0.4); }
#scrollTop.visible { opacity:1; transform:translateY(0); }
#scrollTop:hover { transform:translateY(-4px); }

/* Keyframes */
@keyframes orbFloat1 { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(40px,-30px) scale(1.1); } 66% { transform:translate(-20px,20px) scale(0.95); } }
@keyframes orbFloat2 { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(-30px,40px) scale(1.05); } 66% { transform:translate(20px,-20px) scale(0.9); } }
@keyframes cardFloat1 { 0%,100% { transform:rotate(-6deg) translateY(0); } 50% { transform:rotate(-6deg) translateY(-12px); } }
@keyframes cardFloat2 { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.animate-fade-up { animation:fadeUp 0.7s ease both; }
.animate-fade-in { animation:fadeIn 0.5s ease both; }

/* Responsive */
@media (max-width:1024px) {
  .hero-content { grid-template-columns:1fr; gap:48px; text-align:center; }
  .hero-actions { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-visual { display:none; }
  .tests-grid { grid-template-columns:repeat(2,1fr); }
  .about-brief { grid-template-columns:1fr; gap:36px; padding:40px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .test-detail-layout { grid-template-columns:1fr; }
  .test-detail-sidebar { position:static; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .tests-grid { grid-template-columns:1fr; }
  .categories-grid { grid-template-columns:repeat(2,1fr); }
  .articles-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .about-brief { padding:28px; }
  .section { padding:56px 0; }
}
@media (max-width:480px) {
  .categories-grid { grid-template-columns:repeat(2,1fr); }
}