/* ============================================
ATMANN COMMON STYLES v2.0
Unified Typography · Premium Polish · Calm Presence
Shared across all pages of atmann.ai
Include via:
============================================ */
/* ============================================
GOOGLE FONTS — load in HTML :
============================================ */
/* ============================================
CSS VARIABLES — DESIGN TOKENS
============================================ */
:root {
/* ── Typography ── */
--font-primary: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
--font-display: 'Cormorant Garamond', 'Georgia', serif;
/* Type Scale (1.25 — Major Third) */
--text-xs: 0.925rem;
--text-sm: 1.05rem;
--text-base: 1.15rem;
--text-md: 1.275rem;
--text-lg: 1.375rem;
--text-xl: 1.5rem;
--text-2xl: 1.875rem;
--text-3xl: 2.25rem;
--text-4xl: 3rem;
--text-5xl: 3.75rem;
/* Line Heights */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.8;
--leading-relaxed: 1.8;
/* Letter Spacing */
--tracking-tight: -0.01em;
--tracking-normal: 0.01em;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
/* ── Brand Colors (from Logo) ── */
--purple: #c77dff;
--purple-dark: #9d4edd;
--cyan: #5eead4;
--mint: #a7f3d0;
--soft-violet: #e0c3fc;
/* Ocean / Calm Backgrounds */
--ocean-light: #f0fdfa;
--ocean-mid: #ccfbf1;
--cream: #fefef9;
--deep-teal: #115e59;
/* Text Colors */
--text-dark: #0a1e1e;
--text-muted: #1a3838;
--text-light: #2d5252;
--text-on-dark: rgba(255, 255, 255, 0.95);
--text-on-dark-muted: rgba(255, 255, 255, 0.82);
/* Glow Effects */
--glow-purple: rgba(199, 125, 255, 0.25);
--glow-cyan: rgba(94, 234, 212, 0.25);
/* Extended Palette */
--primary-purple: #9B7EC2;
--primary-cyan: #7ECAC2;
--primary-teal: #6BB5AD;
--accent-violet: #B8A5D3;
--accent-mint: #A8E0D8;
--dark-purple: #4A3B5C;
--light-bg: #F8F6FA;
/* ── Spacing ── */
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
/* ── Borders & Radii ── */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 24px;
--radius-full: 50px;
/* ── Shadows ── */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
--shadow-md: 0 8px 30px rgba(0,0,0,0.06), 0 3px 12px rgba(0,0,0,0.04);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.05);
--shadow-xl: 0 30px 80px rgba(0,0,0,0.1), 0 15px 40px rgba(0,0,0,0.06);
/* ── Transitions ── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 0.2s var(--ease-out);
--transition-base: 0.35s var(--ease-out);
--transition-slow: 0.6s var(--ease-out);
}
/* ============================================
CSS RESET & BASE
============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
padding-top: 80px;
font-family: var(--font-primary);
font-weight: 500;
font-size: var(--text-md);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
background: linear-gradient(180deg, var(--cream) 0%, var(--ocean-light) 30%, var(--ocean-mid) 70%, var(--cream) 100%);
color: var(--text-dark);
overflow-x: hidden;
}
.main-content { padding-top: 80px; }
/* ============================================
GLOBAL TYPOGRAPHY SYSTEM
Cormorant Garamond everywhere —
elegant, consistent, premium.
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-dark);
}
h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 500; line-height: 1.1; }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 500; }
h3 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 700; }
h5 { font-size: var(--text-md); font-weight: 700; }
h6 { font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
p {
font-family: var(--font-primary);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--text-muted);
font-weight: 500;
margin-bottom: 0;
}
h1 span, h2 span, h3 span {
background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
}
a {
font-family: var(--font-primary);
color: var(--deep-teal);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: var(--primary-purple); }
ul, ol { font-family: var(--font-primary); font-size: var(--text-md); font-weight: 500; line-height: var(--leading-relaxed); }
small, .text-sm { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wide); }
strong, b { font-weight: 700; }
::selection { background: rgba(199, 125, 255, 0.15); color: var(--dark-purple); }
/* ============================================
AMBIENT BACKGROUND
============================================ */
.ambient-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: hidden; }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.3; animation: ambientFloat 25s ease-in-out infinite; }
.ambient-orb.orb-1 { width: 450px; height: 450px; background: var(--glow-purple); top: 10%; left: -120px; animation-delay: 0s; }
.ambient-orb.orb-2 { width: 350px; height: 350px; background: var(--glow-cyan); top: 50%; right: -80px; animation-delay: -8s; }
.ambient-orb.orb-3 { width: 280px; height: 280px; background: linear-gradient(135deg, var(--glow-purple), var(--glow-cyan)); bottom: 15%; left: 25%; animation-delay: -16s; }
@keyframes ambientFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -40px) scale(1.08); }
66% { transform: translate(-30px, 30px) scale(0.92); }
}
/* ============================================
HEADER / NAVIGATION
============================================ */
header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
padding: 1rem 3rem;
background: rgba(254, 254, 249, 0.85);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid rgba(94, 234, 212, 0.15);
transition: all var(--transition-base);
}
header.scrolled { padding: 0.6rem 3rem; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04); }
nav { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-img { width: 48px; height: 48px; object-fit: contain; }
.logo-text {
font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500;
letter-spacing: var(--tracking-tight);
background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 50%, var(--mint) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a {
text-decoration: none; color: var(--text-dark);
font-family: var(--font-primary); font-weight: 600; font-size: var(--text-md);
letter-spacing: var(--tracking-wide);
transition: all var(--transition-fast); position: relative;
}
.nav-links a::after {
content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 1.5px;
background: linear-gradient(90deg, var(--purple), var(--cyan));
transition: width var(--transition-base);
}
.nav-links a:hover { color: var(--primary-purple); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
padding: 0.65rem 1.6rem;
background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
border: none; border-radius: var(--radius-full); color: white;
font-family: var(--font-primary); font-weight: 700; font-size: var(--text-base);
letter-spacing: var(--tracking-wide);
cursor: pointer; transition: all var(--transition-base); text-decoration: none;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--glow-purple); color: white; }
.mobile-menu-btn {
display: none; background: none; border: none; cursor: pointer;
width: 28px; height: 22px; position: relative; z-index: 1001;
}
.mobile-menu-btn span {
display: block; width: 100%; height: 2px; background: var(--text-dark);
border-radius: 2px; transition: all var(--transition-base); position: absolute; left: 0;
}
.mobile-menu-btn span:nth-child(1) { top: 0; }
.mobile-menu-btn span:nth-child(2) { top: 10px; }
.mobile-menu-btn span:nth-child(3) { top: 20px; }
/* ============================================
BUTTONS
============================================ */
.btn-primary, .btn-secondary, .btn-white, .btn-outline-white {
font-family: var(--font-primary); font-weight: 700; font-size: var(--text-md);
letter-spacing: var(--tracking-wide); border-radius: var(--radius-full);
cursor: pointer; transition: all var(--transition-base); text-decoration: none;
display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary { padding: 0.9rem 2.2rem; background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%); border: none; color: white; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--glow-purple); color: white; }
.btn-secondary { padding: 0.9rem 2.2rem; background: transparent; border: 1.5px solid var(--cyan); color: var(--deep-teal); }
.btn-secondary:hover { background: rgba(94, 234, 212, 0.08); transform: translateY(-3px); color: var(--deep-teal); }
.btn-white { padding: 0.9rem 2.2rem; background: white; border: none; color: var(--purple-dark); }
.btn-white:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(255,255,255,0.3); color: var(--purple-dark); }
.btn-outline-white { padding: 0.9rem 2.2rem; background: transparent; border: 1.5px solid rgba(255,255,255,0.5); color: white; }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); color: white; }
/* ============================================
SECTION STYLES
============================================ */
.section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-xl); }
.section-header { text-align: center; margin-bottom: var(--space-4xl); max-width: 800px; margin-left: auto; margin-right: auto; }
.section-tag {
display: inline-block; padding: 0.4rem 1.2rem;
background: rgba(94, 234, 212, 0.12); border-radius: var(--radius-full);
font-family: var(--font-primary); font-size: var(--text-base); font-weight: 700;
letter-spacing: var(--tracking-wider); text-transform: uppercase;
color: var(--deep-teal); margin-bottom: var(--space-lg);
}
.section-header h2 {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
font-weight: 400; line-height: var(--leading-snug);
margin-bottom: var(--space-lg); color: var(--text-dark);
}
.section-header h2 span {
background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
font-weight: 600;
}
.section-header p {
font-family: var(--font-primary); font-size: var(--text-lg); font-weight: 500;
line-height: var(--leading-relaxed); color: var(--text-muted);
max-width: 650px; margin: 0 auto;
}
/* ============================================
CARD PATTERN
============================================ */
.card {
background: rgba(255,255,255,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-xl); border: 1px solid rgba(94, 234, 212, 0.12);
transition: all var(--transition-base); box-shadow: var(--shadow-md);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(94, 234, 212, 0.25); }
.card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
.card p { font-family: var(--font-primary); font-size: var(--text-md); color: var(--text-muted); font-weight: 500; line-height: var(--leading-relaxed); }
/* ============================================
HEALER AVATAR
============================================ */
.healer-avatar { position: fixed; bottom: 80px; right: 30px; z-index: 999; cursor: pointer; animation: dropDown 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes dropDown {
0% { transform: translateY(-100vh); opacity: 0; }
60% { transform: translateY(20px); opacity: 1; }
80% { transform: translateY(-10px); }
100% { transform: translateY(0); opacity: 1; }
}
.healer-circle {
width: 68px; height: 68px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(199, 125, 255, 0.9), transparent 50%),
radial-gradient(circle at 20% 70%, rgba(94, 234, 212, 0.9), transparent 50%),
radial-gradient(circle at 80% 30%, rgba(167, 243, 208, 0.8), transparent 50%),
linear-gradient(135deg, var(--purple), var(--cyan));
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 40px var(--glow-purple), 0 0 20px var(--glow-cyan), inset 0 0 20px rgba(255,255,255,0.3);
transition: all var(--transition-base); position: relative; overflow: hidden;
}
.healer-circle::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255,255,255,0.1) 70%); animation: magicRotate 4s linear infinite; }
.healer-circle::after { content: ''; position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; box-shadow: 15px 10px 0 rgba(255,255,255,0.8), -20px 15px 0 rgba(199,125,255,0.6), 10px -18px 0 rgba(94,234,212,0.7), -12px -10px 0 rgba(167,243,208,0.6), 25px -5px 0 rgba(255,255,255,0.5); animation: healerSparkle 2s ease-in-out infinite; }
@keyframes magicRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes healerSparkle { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
.healer-circle:hover { transform: scale(1.1); box-shadow: 0 15px 50px var(--glow-purple), 0 0 30px var(--glow-cyan), 0 0 60px rgba(199,125,255,0.3), inset 0 0 25px rgba(255,255,255,0.4); }
.magic-orbs { position: absolute; width: 100%; height: 100%; border-radius: 50%; }
.magic-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.magic-orb:nth-child(1) { width: 12px; height: 12px; background: radial-gradient(circle, white, rgba(199,125,255,0.8)); top: 10%; left: 20%; animation: orbitFloat 3s ease-in-out infinite; }
.magic-orb:nth-child(2) { width: 8px; height: 8px; background: radial-gradient(circle, white, rgba(94,234,212,0.8)); top: 60%; right: 15%; animation: orbitFloat 2.5s ease-in-out infinite 0.5s; }
.magic-orb:nth-child(3) { width: 10px; height: 10px; background: radial-gradient(circle, white, rgba(167,243,208,0.8)); bottom: 20%; left: 25%; animation: orbitFloat 3.5s ease-in-out infinite 1s; }
.magic-orb:nth-child(4) { width: 6px; height: 6px; background: radial-gradient(circle, white, rgba(224,195,252,0.9)); top: 30%; right: 25%; animation: orbitFloat 2s ease-in-out infinite 0.3s; }
@keyframes orbitFloat { 0%, 100% { transform: translate(0,0) scale(1); opacity: 0.7; } 25% { transform: translate(5px,-5px) scale(1.3); opacity: 1; } 50% { transform: translate(0,-8px) scale(0.9); opacity: 0.8; } 75% { transform: translate(-5px,-3px) scale(1.1); opacity: 1; } }
.healer-face { font-size: 2rem; display: none; }
.healer-bubble { position: absolute; bottom: 82px; right: 0; background: white; padding: 1rem 1.4rem; border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg); box-shadow: var(--shadow-lg); white-space: nowrap; opacity: 0; transform: translateY(8px); transition: all var(--transition-base); }
.healer-avatar:hover .healer-bubble { opacity: 1; transform: translateY(0); }
.healer-bubble p { font-family: var(--font-primary); font-size: var(--text-base); color: var(--text-dark); margin-bottom: 0.3rem; line-height: var(--leading-snug); }
.healer-bubble p:last-child { margin-bottom: 0; }
.healer-bubble strong { color: var(--purple-dark); font-weight: 600; }
.healer-pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--cyan)); animation: healerPulse 2s ease-in-out infinite; z-index: -1; }
@keyframes healerPulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.6); opacity: 0; } }
/* ============================================
MUSIC CONTROL
============================================ */
.music-control { position: fixed; left: 20px; bottom: 100px; width: 52px; height: 52px; background: linear-gradient(135deg, rgba(155,126,194,0.92) 0%, rgba(126,202,194,0.92) 100%); border-radius: 50%; cursor: pointer; z-index: 9999; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(155,126,194,0.35), 0 0 30px rgba(126,202,194,0.15); transition: all var(--transition-base); opacity: 0; visibility: hidden; transform: translateX(-20px); }
.music-control.visible { opacity: 1; visibility: visible; transform: translateX(0); }
.music-control:hover { transform: scale(1.08); box-shadow: 0 6px 25px rgba(155,126,194,0.45), 0 0 40px rgba(126,202,194,0.25); }
.music-control:hover .music-label { opacity: 1; transform: translateX(0); }
.music-icon-container { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.music-waves { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 22px; opacity: 0; position: absolute; }
.music-waves.active { opacity: 1; }
.wave { width: 3px; background: white; border-radius: 2px; animation: waveAnimation 1s ease-in-out infinite; }
.wave:nth-child(1) { height: 7px; animation-delay: 0s; }
.wave:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.wave:nth-child(3) { height: 11px; animation-delay: 0.3s; }
.wave:nth-child(4) { height: 18px; animation-delay: 0.45s; }
@keyframes waveAnimation { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.play-icon, .pause-icon { width: 22px; height: 22px; color: white; position: absolute; transition: opacity var(--transition-fast), transform var(--transition-fast); }
.play-icon { opacity: 1; transform: scale(1); }
.pause-icon { opacity: 0; transform: scale(0.8); }
.music-control.playing .play-icon { opacity: 0; transform: scale(0.8); }
.music-control.playing .pause-icon { opacity: 0; transform: scale(0.8); }
.music-control.playing .music-waves { opacity: 1; }
.music-ripple { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35); animation: rippleEffect 2s ease-out infinite; pointer-events: none; opacity: 0; }
.music-control.playing .music-ripple { opacity: 1; }
@keyframes rippleEffect { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.8); opacity: 0; } }
.music-label { position: absolute; left: 62px; background: rgba(74,59,92,0.92); color: white; padding: 7px 14px; border-radius: var(--radius-full); font-family: var(--font-primary); font-size: var(--text-base); font-weight: 500; letter-spacing: var(--tracking-wide); white-space: nowrap; opacity: 0; transform: translateX(-10px); transition: all var(--transition-base); box-shadow: var(--shadow-md); }
/* ============================================
MUSIC PROMPT OVERLAY
============================================ */
.music-prompt-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(74,59,92,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: all 0.5s ease; }
.music-prompt-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.music-prompt-box { background: linear-gradient(180deg, #FAFAFA 0%, #F4F0F8 100%); border-radius: var(--radius-xl); padding: 48px 40px; max-width: 420px; width: 90%; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.25), 0 0 120px rgba(155,126,194,0.2); animation: promptAppear 0.5s var(--ease-out); }
@keyframes promptAppear { from { transform: scale(0.92) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.prompt-icon { width: 80px; height: 80px; margin: 0 auto 24px; animation: floatIcon 3s ease-in-out infinite; }
.prompt-icon svg { width: 100%; height: 100%; }
@keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.music-prompt-box h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; color: var(--dark-purple); margin-bottom: 12px; }
.music-prompt-box p { font-family: var(--font-primary); font-size: var(--text-md); font-weight: 500; color: var(--text-muted); margin-bottom: 32px; line-height: var(--leading-relaxed); }
.prompt-buttons { display: flex; flex-direction: column; gap: 12px; }
.prompt-btn { padding: 14px 28px; border: none; border-radius: var(--radius-full); font-family: var(--font-primary); font-size: var(--text-md); font-weight: 700; letter-spacing: var(--tracking-wide); cursor: pointer; transition: all var(--transition-base); }
.prompt-btn.accept { background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-cyan) 100%); color: white; box-shadow: 0 4px 20px rgba(155,126,194,0.35); }
.prompt-btn.accept:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(155,126,194,0.45); }
.prompt-btn.decline { background: transparent; color: var(--primary-purple); border: 1.5px solid rgba(155,126,194,0.25); }
.prompt-btn.decline:hover { background: rgba(155,126,194,0.08); border-color: var(--primary-purple); }
/* ============================================
FOOTER
============================================ */
footer { background: var(--text-dark); color: white; padding: var(--space-5xl) 3rem var(--space-2xl); }
.footer-container { max-width: 1200px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-3xl); padding-bottom: var(--space-3xl); border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand .logo-text { font-size: var(--text-2xl); margin-bottom: var(--space-md); display: block; }
.footer-brand p { font-family: var(--font-primary); color: var(--text-on-dark-muted); font-size: var(--text-md); font-weight: 500; line-height: var(--leading-relaxed); margin-bottom: var(--space-xl); }
.app-badges { display: flex; gap: var(--space-md); }
.app-badge { padding: 0.7rem 1.1rem; background: rgba(255,255,255,0.08); border-radius: var(--radius-md); display: flex; align-items: center; gap: 8px; transition: all var(--transition-fast); text-decoration: none; color: white; }
.app-badge:hover { background: rgba(255,255,255,0.14); color: white; }
.app-badge-icon { font-size: 1.5rem; }
.app-badge-text { text-align: left; }
.app-badge-text small { font-family: var(--font-primary); font-size: var(--text-sm); font-weight: 500; opacity: 0.6; display: block; letter-spacing: var(--tracking-wide); }
.app-badge-text span { font-family: var(--font-primary); font-weight: 700; font-size: var(--text-base); }
.footer-column h4 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-xl); color: var(--cyan); }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 0.7rem; }
.footer-column ul li a { font-family: var(--font-primary); color: var(--text-on-dark-muted); text-decoration: none; transition: color var(--transition-fast); font-size: var(--text-md); font-weight: 500; }
.footer-column ul li a:hover { color: var(--cyan); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-xl); }
.footer-bottom p { font-family: var(--font-primary); color: rgba(255,255,255,0.4); font-size: var(--text-base); font-weight: 500; }
.social-links { display: flex; gap: var(--space-sm); }
.social-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); color: white; text-decoration: none; }
.social-link img { object-fit: contain; width: 28px; height: 28px; }
.social-link:hover { background: linear-gradient(135deg, var(--purple), var(--cyan)); }
/* ============================================
UTILITIES
============================================ */
.text-gradient { background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-narrow { max-width: 700px; }
.max-w-content { max-width: 900px; }
.max-w-wide { max-width: 1200px; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.section-container { padding: 0 var(--space-lg); }
}
@media (max-width: 768px) {
html { font-size: 15px; }
body { padding-top: 70px; }
header { padding: 0.8rem 1.2rem; }
header.scrolled { padding: 0.5rem 1.2rem; }
.nav-links { display: none; }
.mobile-menu-btn { display: block; }
.section-header { margin-bottom: var(--space-2xl); }
.section-header h2 { font-size: var(--text-2xl); }
.section-header p { font-size: var(--text-base); }
.footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
.footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
.music-control { left: 15px; bottom: 80px; width: 48px; height: 48px; }
.music-label { display: none; }
.music-prompt-box { padding: 32px 24px; }
.music-prompt-box h3 { font-size: var(--text-xl); }
.prompt-icon { width: 64px; height: 64px; }
.healer-avatar { bottom: 70px; right: 20px; }
.healer-circle { width: 60px; height: 60px; }
}
@media (max-width: 480px) {
html { font-size: 14px; }
.section-container { padding: 0 var(--space-md); }
.app-badges { flex-direction: column; }
}