/* ============================================================
    STICKY STYLISH NAVBAR STRUCTURE
   ============================================================ */
.navbar {position: sticky;top: 0;z-index: 100;background: rgba(255, 255, 255, 0.85);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-bottom: 1px solid var(--border);height: var(--nav-height);}
.nav-container {max-width: 940px;margin: 0 auto;padding: 0 24px;height: 100%;display: flex;align-items: center;gap: 32px;}
.logo {font-size: 16px;font-weight: 700;color: var(--text-primary);cursor: pointer;letter-spacing: -0.02em;flex-shrink: 0;}
.nav-menu {display: flex;gap: 4px;align-items: center;margin-left: auto;}
.nav-item {font-size: 13px;font-weight: 500;color: var(--text-secondary);text-decoration: none;padding: 6px 12px;border-radius: 8px;transition: background 0.15s, color 0.15s;white-space: nowrap;}
.nav-item:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
.nav-item.active { background: rgba(0,113,227,0.08); color: var(--accent); }
.menu-toggle {display: none;flex-direction: column;gap: 5px;cursor: pointer;margin-left: auto;padding: 6px;}
.menu-toggle span {display: block;width: 22px;height: 2px;background: var(--text-primary);border-radius: 2px;transition: 0.3s;}
@media (max-width: 700px) {.menu-toggle { display: flex; }
       .nav-menu {display: none;position: absolute;top: var(--nav-height);left: 0; right: 0;background: rgba(255,255,255,0.97);backdrop-filter: blur(20px);flex-direction: column;padding: 12px 16px 20px;gap: 2px;border-bottom: 1px solid var(--border);}
       .nav-menu.show { display: flex; }
       .nav-item { width: 100%; padding: 10px 14px; }}

/* Security Box */
.security {padding: 60px 0;}
.security-box {background-color: transparent;border-left: 3px solid #86868b;padding: 16px 24px;font-size: 14px;color: #6e6e73;}        

/* Footer */
.footer {padding: 40px 24px;text-align: center;font-size: 12px;color: #86868b;border-top: 1px solid #e8e8ed;}    

/* Hero Section */
.hero {padding-top: 140px;padding-bottom: 80px;text-align: center;}
.badge {font-size: 20px;font-weight: 600;color: #bf4800;text-transform: uppercase;letter-spacing: 0.05em;display: block;margin-bottom: 12px;}
.hero h1 {font-size: 48px;font-weight: 700;letter-spacing: -0.03em;line-height: 1.1;margin-bottom: 16px;color: #1d1d1f;}
.subtitle {font-size: 19px;color: #86868b;max-width: 640px;margin: 0 auto;font-weight: 400;letter-spacing: -0.01em;}