/* globaltonecheck.com */
/* Colors: #1B4965, #5FA8D3, #BEE9E8, #CAD2C5, #E07A5F, #F0F7F4, #274C5B, #F2CC8F */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; background: #F0F7F4; color: #3D5A6E; overflow-x: hidden; }
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; background: linear-gradient(180deg, #F0F7F4 0%, #BEE9E8 100%); }
.hero-title { font-family: 'Lora', serif; font-weight: 600; font-size: clamp(2.5rem, 7vw, 4.5rem); color: #1B4965; letter-spacing: 0.02em; opacity: 0; animation: fadeSlide 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.hero-sub { font-size: 17px; color: #5FA8D3; margin-top: 16px; font-weight: 300; opacity: 0; animation: fadeSlide 1s 0.6s ease forwards; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.section { padding: 100px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #F0F7F4; }
.section-title { font-family: 'Lora', serif; font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.8rem); color: #1B4965; margin-bottom: 20px; letter-spacing: 0.02em; }
.section-text { font-weight: 300; font-size: 17px; color: #3D5A6E; max-width: 620px; margin-bottom: 48px; }
.tone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; max-width: 800px; width: 100%; }
.tone-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(190, 233, 232, 0.5); border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: 0 8px 32px rgba(27, 73, 101, 0.08); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.tone-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 40px rgba(27, 73, 101, 0.14); }
.tone-dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 16px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.tone-card h3 { font-family: 'Lora', serif; font-weight: 600; font-size: 18px; color: #1B4965; margin-bottom: 8px; }
.tone-card p { font-size: 14px; color: #5FA8D3; font-weight: 300; }
.site-footer { text-align: center; padding: 48px 40px; background: #274C5B; color: #CAD2C5; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300; }
@media (max-width: 768px) { .section { padding: 60px 24px; } .tone-grid { grid-template-columns: 1fr; } }