/* css/components.css */
.btn {
display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 10px;
font-weight: 600; font-size: 1rem; cursor: pointer; position: relative; border: none;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-primary {
background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
color: #FFFFFF;
box-shadow: var(--shadow-accent);
}
.btn-primary::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
border: 2px solid var(--accent); opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.45);
}
.btn-primary:hover::after { animation: sonar-ping 0.9s var(--ease); }
.btn-primary:active { transform: translateY(0); }
@keyframes sonar-ping {
0% { opacity: 0.2; transform: scale(1); }
100% { opacity: 0; transform: scale(1.15); }
}
.btn-secondary { background: var(--gray-100); color: var(--gray-800); }
.btn-secondary:hover { background: var(--gray-200); }

/* Hero Section */
.hero { padding: 100px 0 90px; text-align: center; position: relative; overflow: hidden; }
.hero-radar { position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.hero-radar::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: repeating-radial-gradient(circle, transparent 0 62px, rgba(0, 0, 0, 0.04) 63px 64px);
mask-image: radial-gradient(circle, black 55%, transparent 88%);
-webkit-mask-image: radial-gradient(circle, black 55%, transparent 88%);
}
.hero-radar::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 0deg, rgba(0, 0, 0, 0.08), transparent 22%);
mask-image: radial-gradient(circle, black 55%, transparent 88%);
-webkit-mask-image: radial-gradient(circle, black 55%, transparent 88%);
animation: radar-spin 8s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
.hero > *:not(.hero-radar) { position: relative; z-index: 1; }
.hero-subtitle { font-size: 1.15rem; max-width: 600px; margin: 16px auto 32px; color: var(--gray-500); }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent-soft); color: var(--accent); padding: 7px 14px; border-radius: 20px;
font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; margin-bottom: 24px;
border: 1px solid var(--bg-surface-border);
}
.hero-badge .dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1.6s ease-in-out infinite;
}

/* Feature Cards (Made Compact) */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 40px 0; }
.feature-card {
background: var(--bg-surface);
border: 1px solid var(--bg-surface-border);
border-radius: 14px; padding: 20px; position: relative; overflow: hidden;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.feature-card::after {
content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
transition: left 0.7s var(--ease); pointer-events: none;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.feature-card:hover::after { left: 130%; }

.feature-icon {
width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
justify-content: center; margin-bottom: 12px; font-size: 1.25rem;
}
.icon-safe { background: linear-gradient(135deg, var(--safe-soft), white); color: var(--safe); }
.icon-caution { background: linear-gradient(135deg, var(--caution-soft), white); color: var(--caution); }
.icon-danger { background: linear-gradient(135deg, var(--danger-soft), white); color: var(--danger); }
.icon-accent { background: linear-gradient(135deg, var(--accent-soft), white); color: var(--gray-900); }

.feature-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.feature-card p { font-size: 0.9rem; line-height: 1.5; margin-bottom: 0; }

/* Trap Badges (Made Compact) */
.trap-badge {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px;
font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; margin-bottom: 10px;
}
.badge-safe { background: var(--safe-soft); color: var(--safe); }
.badge-caution { background: var(--caution-soft); color: var(--caution); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-caution::before, .badge-danger::before {
content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* How it Works */
.section-dark {
background-color: var(--ink-950);
background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
background-size: 48px 48px; padding: 90px 0; margin-top: 80px; border-top: 1px solid var(--bg-surface-border); border-bottom: 1px solid var(--bg-surface-border);
}
.section-dark h2 { color: var(--gray-900); }
.section-dark p { color: var(--ink-text); }
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 50px; }
.step-card { background: var(--ink-900); border: 1px solid var(--bg-surface-border); border-radius: 16px; padding: 28px; text-align: left; }
.step-number {
font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--gray-900); display: inline-block;
background: var(--accent-soft); padding: 4px 10px; border-radius: 6px; margin-bottom: 16px; letter-spacing: 0.04em;
}
.step-card h3 { color: var(--gray-900); }
.step-card p { margin-bottom: 0; color: var(--gray-500); }

/* Legal Pages */
.legal-content { max-width: 800px; margin: 60px auto; }
.legal-content h2 { margin-top: 40px; border-bottom: 1px solid var(--bg-surface-border); padding-bottom: 8px; font-size: 1.3rem; }
.legal-content ul { margin-left: 20px; margin-bottom: 20px; color: var(--gray-500); }
.legal-content li { margin-bottom: 8px; }